Skip to content

Instantly share code, notes, and snippets.

@rambhairao

rambhairao/random_code.html

Last active August 5, 2017 12:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rambhairao/28579f51f589ae35d16002e8ad856a60 to your computer and use it in GitHub Desktop.
Save rambhairao/28579f51f589ae35d16002e8ad856a60 to your computer and use it in GitHub Desktop.
Download ZIP
olly // source http://jsbin.com/qutitev
Raw
random_code.html
<!DOCTYPE html>
<html>
<head>
<title> olly </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style type="text/css">
.tabs {
width:100%;
display:inline-block;
}
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#009b86;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
.tab-links .tab.active{
background-color: red;
}
.next_prev_button_div{
width: 300px;
display: block;
position: relative;
}
.next_prev_button_div .next_prev_button{
display: inline-block;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab4">Tab 4</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab1" id="lue">Tab 1</a></li>
</ul>
<div class="tab-content">
<div id="tab4" class="tab active">
<p>Tab #4 here!</p>
<p>Create a new project folder. Within that folder create an index.js file. We’ll need to install and require our dependencies. Open up your command line, and install and save: request, request-promise, and cheerio </p>
</div>
<div id="tab2" class="tab">
<p>Tab #2 here!</p>
<p>Create a new project folder. Within that folder create an index.js file. We’ll need to install and require our dependencies. Open up your command line, and install and save: request, request-promise, and cheerio </p>
</div>
<div id="tab3" class="tab">
<p>Tab #3 here!</p>
<p>Create a new project folder. Within that folder create an index.js file. We’ll need to install and require our dependencies. Open up your command line, and install and save: request, request-promise, and cheerio </p>
</div>
<div id="tab1" class="tab ">
<p>Tab #1 here!</p>
<p>Create a new project folder. Within that folder create an index.js file. We’ll need to install and require our dependencies. Open up your command line, and install and save: request, request-promise, and cheerio</p>
</div>
</div>
</div>
<div class="next_prev_button_div">
<div class="next_prev_button">
<button class="button_next" >NEXT</button>
</div>
<div class="next_prev_button">
<button class="button_preview">PREVIEW</button>
</div>
</div>
<!-- TIMEOUT FUCNTION -->
<button onclick="window.setTimeout(function()
{
location.href = 'https://www.curofy.com';}, 2000);"> Time-out-function </button>
<script type="text/javascript">
$('.tabs .tab-links a').on('click', function() {
var active_tab = $(this).attr('href');
console.log(active_tab);
if(active_tab == '#tab4'){
$("#tab4").addClass('active').removeClass('tab');
$("#tab1, #tab2, #tab3").addClass('tab').removeClass('active');
}
else if(active_tab == '#tab1'){
$("#tab1").addClass('active').removeClass('tab');
$("#tab4, #tab2, #tab3").addClass('tab').removeClass('active');
}
else if(active_tab == '#tab2'){
$("#tab2").addClass('active').removeClass('tab');
$("#tab1, #tab4, #tab3").addClass('tab').removeClass('active');
}
else if(active_tab == '#tab3'){
$("#tab3").addClass('active').removeClass('tab');
$("#tab1, #tab2, #tab4").addClass('tab').removeClass('active');
}
});
// button next function
$(".button_next").on('click', button_next_fun);
function button_next_fun(){
if ($("#tab4").hasClass("active")) {
$("#tab4").addClass('tab').removeClass('active');
$("#tab2").addClass('active').removeClass('tab');
} else if($("#tab2").hasClass("active")){
$("#tab2").addClass('tab').removeClass('active');
$("#tab3").addClass('active').removeClass('tab');
}
else if($("#tab3").hasClass("active")){
$("#tab3").addClass('tab').removeClass('active');
$("#tab1").addClass('active').removeClass('tab');
}
else if($("#tab1").hasClass("active")){
$("#tab1").addClass('tab').removeClass('active');
$("#tab4").addClass('active').removeClass('tab');
}
}
// button preview fucntion
$(".button_preview").on('click', button_pre_fun );
function button_pre_fun(){
if ($("#tab4").hasClass("active")) {
$("#tab4").addClass('tab').removeClass('active');
$("#tab1").addClass('active').removeClass('tab');
} else if($("#tab2").hasClass("active")){
$("#tab2").addClass('tab').removeClass('active');
$("#tab4").addClass('active').removeClass('tab');
}
else if($("#tab3").hasClass("active")){
$("#tab3").addClass('tab').removeClass('active');
$("#tab2").addClass('active').removeClass('tab');
}
else if($("#tab1").hasClass("active")){
$("#tab1").addClass('tab').removeClass('active');
$("#tab3").addClass('active').removeClass('tab');
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment