Auto Navigate between tabs using using JavaScript and Jquery
Auto Navigate between tabs using using JavaScript and Jquery
HTML
<ul id="tabs">
<li>
<a href="#about">About JavaScript tabs</a>
</li>
<li>
<a href="#advantages">Advantages of tabs</a>
</li>
<li>
<a href="#usage">Using tabs</a>
</li>
</ul>
<br />
<br />
<div class="tabContent" id="about">
<div class="contentText" id="aboutContent">
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
<div class="contentPicture" id="aboutPicture">
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
</div>
</div>
<div class="tabContent" id="advantages">
<div>
<p>Advantages of tabs</p>
</div>
</div>
<div class="tabContent" id="usage">
<div>
<p>usage of tabs</p>
<p>Content Line 2</p>
</div>
</div>
CSS
body {
font-size: 80%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
ul#tabs {
list-style-type: none;
}
ul#tabs li {
margin: 0 5px 0 0;
padding: 10px;
float: left;
display: inline;
border: 1px solid black;
}
ul#tabs li.selected {
color: #000;
background-color: gray;
font-weight: bold;
}
ul#tabs li:hover {
background-color: yellow;
}
ul#tabs li a {
color: #42454a;
text-decoration: none;
}
ul#tabs li a:hover {
color: brown;
}
div.tabContent {
border: 1px solid #c9c3ba;
padding: 0.5em;
background-color: #f1f0ee;
display: none;
min-width: 400px;
width: 400px;
min-height: 100px;
height: 100px;
overflow: auto;
}
JavaScript
var a = -2/0;
console.log(a);