Skip to content

Instantly share code, notes, and snippets.

@th-lange
Last active August 29, 2015 14:05
Show Gist options
  • Save th-lange/b2f53f1023bf2e587191 to your computer and use it in GitHub Desktop.
Save th-lange/b2f53f1023bf2e587191 to your computer and use it in GitHub Desktop.
Simple jQuery Tab System #JScript
<!DOCTYPE html>
<html>
<head>
<title>Tabs</title>
<link rel="stylesheet" href="tabs.css"/>
</head>
<body>
<div class="tabs">
<ul>
<li class="selected"><a href="#one">Tennis</a></li>
<li><a href="#two">Football</a></li>
<li><a href="#three">Squash</a></li>
</ul>
<div class="tab one">
<p>Abcdefg
</p>
</div>
<div class="tab two">
<p>KLJHKJH
</p>
</div>
<div class="tab three">
<p>sdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar sasad
fsad sdasga
s gdsg d gsag asg asdg
saggfsda
</p>
</div>
</div>
<script src="tabs.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
body {
padding-top: 50px;
}
.tabs {
width: 50%;
}
.tabs ul {
list-style-type: none;
padding-left: 0;
border-left: 1px solid #ccc;
overflow: hidden;
margin: 0;
}
.tabs ul li {
float: left;
list-style-type: none;
padding: 5px 10px;
border: 1px solid #ccc;
border-bottom: none;
}
.tabs ul li a {
text-decoration: none;
}
.tabs div {
float: left;
padding: 0 10px;
border: 1px solid #ccc;
}
.tabs ul li.selected {
background: #ccc;
}
.tab {
display: none;
}
.tab.one {
display: block;
}
$('.tabs > ul li a').on('click', function() {
var that = $(this),
tabs = that.parent().parent().parent(),
target = $.trim(that.attr('href').substring(1)),
items = tabs.find('ul li');
items.removeClass('selected').find('a[href="#' + target + '"]').parent().addClass('selected');
tabs.find('.tab').show();
tabs.find('.tab:not(".' + target + '")').hide();
});
@flexcium
Copy link

flexcium commented Jan 8, 2015

i dont know why i copied this sample file but its not working for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment