Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML
- =================================================
- <ul class="tabs">
- <li><a href="#tab-1">Gallery</a></li>
- <li><a href="#tab-2">Submit</a></li>
- </ul>
- <div class="tab_container">
- <div id="tab-1" class="tab_content">
- <!--Content-->
- </div>
- <div id="tab-2" class="tab_content">
- <!--Content-->
- </div>
- </div>
- CSS
- =================================================
- ul.tabs {
- margin: 0;
- padding: 0;
- float: left;
- list-style: none;
- height: 32px; /*--Set height of tabs--*/
- border-bottom: 1px solid #999;
- border-left: 1px solid #999;
- width: 100%;
- }
- ul.tabs li {
- float: left;
- margin: 0;
- padding: 0;
- height: 31px; /*--Subtract 1px from the height of the unordered list--*/
- line-height: 31px; /*--Vertically aligns the text within the tab--*/
- border: 1px solid #999;
- border-left: none;
- margin-bottom: -1px; /*--Pull the list item down 1px--*/
- overflow: hidden;
- position: relative;
- background: #e0e0e0;
- }
- ul.tabs li a {
- text-decoration: none;
- color: #000;
- display: block;
- font-size: 1.2em;
- padding: 0 20px;
- border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
- outline: none;
- }
- ul.tabs li a:hover {
- background: #ccc;
- }
- html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
- background: #fff;
- border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
- }
- .tab_container {
- border: 1px solid #999;
- border-top: none;
- overflow: hidden;
- clear: both;
- float: left; width: 100%;
- background: #fff;
- }
- .tab_content {
- padding: 20px;
- font-size: 1.2em;
- }
- jQuery
- =================================================
- $(document).ready(function() {
- //When page loads...
- $(".tab_content").hide(); //Hide all content
- $("ul.tabs li:first").addClass("active").show(); //Activate first tab
- $(".tab_content:first").show(); //Show first tab content
- //On Click Event
- $("ul.tabs li").click(function() {
- $("ul.tabs li").removeClass("active"); //Remove any "active" class
- $(this).addClass("active"); //Add "active" class to selected tab
- $(".tab_content").hide(); //Hide all tab content
- var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
- $(activeTab).fadeIn(); //Fade in the active ID content
- return false;
- });
- /* Allow a hashtag to be passed in the URL so any tab can be loaded directly */
- if ( location.hash.length > 4 && location.hash.substr(0,5) == '#tab-' ) {
- $('.tabs li a').each(function(i){
- if ( $(this).attr('href') == location.hash ) {
- $(this).trigger('click');
- }
- });
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement