<style>
ul.tabs {
margin: 0;
padding: 0;
list-style: none;
}
ul.tabs li{
background: #ffffff;
color: #333333;
display: inline-block;
cursor: pointer;
padding: 20px 25px;
}
ul.tabs li:hover{
background: lightgrey;
color: #333333;
}
ul.tabs li.current{
background: lightgrey;
color: #333333;
}
.tab-content .tab-data {
display: none;
}
.tab-content .tab-data.current {
display: block;
}
</style>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab1</li>
<li class="tab-link" data-tab="tab-2">Tab2</li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-data current">
123
</div>
<div id="tab-2" class="tab-data">
456
</div>
</div>
<script>
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-data').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
</script>
Basic UI Tabs. I use this in most web projects for tabular data.
1 Response
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.