html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--
http://makemeanalyst.com/r-programming
https://intellipaat.com/blog/tutorial/r-programming
https://www.geeksforgeeks.org/switch-case-in-r/
https://www.datamentor.io/r-programming
-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="w3-container">
<div id = "page">
<div class="w3-panel w3-blue w3-card" id = "overview">
<div class="card-body w3-center" id = "welcomepage">
<h1 class="">Tutorial 2</h1>
<h3 class="">R Programming</h3>
</div>
</div>
</div>
<div id = "page">
<div class="w3-panel w3-card" id = "overview">
<div class="card-body">
<h4 class="card-title">Overview of R</h4>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
.nextprev {
padding-bottom: 20px;
}
.next {
float:right;
}
#welcomepage, #endpage {
padding-top:100px;
padding-bottom: 100px;
}
.card-title {
text-align: center;
font-size: 26px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function () {
var divs = $('.w3-container #page');
var now = 0; // currently shown div
divs.hide().first().show();
$("button[name=next]").click(function (e) {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("button[name=prev]").click(function (e) {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show();
});
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run