JQuery簡單標籤導航

Question

我想要一個簡單的導航，而不使用任何插件，但簡單的JQuery。

鏈接1 1區，2區，3股利，股利4
鏈路2
鏈路3
鏈路4

當用戶點擊鏈接1顯示1區並隱藏所有其他的div。鏈接2然後顯示Div2並隱藏所有其他人。我想用較少的行數來做到這一點。

Answer 1

我已經在jsfiddle爲你做了一個，希望這個幫助。歡呼聲

Answer 2

任何你不想使用插件的原因？這裏是一個偉大的插件，會做一切你都在問：http://flowplayer.org/tools/tabs/index.html

Answer 3

下面是一個片段我用所有的時間（original）： JS：

$(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; 
    }); 

}); 

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; 
} 

標記：

<ul class="tabs"> 
    <li><a href="#tab1">Gallery</a></li> 
    <li><a href="#tab2">Submit</a></li> 
</ul> 

<div class="tab_container"> 
    <div id="tab1" class="tab_content"> 
     asdfasdfasdfasdf 
    </div> 
    <div id="tab2" class="tab_content"> 
     asdfasdf 
    </div> 
</div> 

希望它有幫助

Answer 4

這裏是一個簡單的腳本，只需添加在您的文件中，它將工作，也不會與其他現有的腳本衝突。

觀看演示：http://simple-jquery-responsive-tab.blogspot.in/

Answer 5

您可以檢查此component on jsFiddle。

它也可以用於如果你想動態填充。

$(document).ready(function() { 
$.each($('.tabwrapper .tabmenu ul.nav li'), function(i) { 
    $(this).attr('data-tab', i); 
}); 
$.each($('.tabwrapper .tabcontent .tabs'), function(i) { 
    $(this).attr('data-tab', i); 
}); 
$('.tabwrapper .tabmenu ul.nav li a').click(function() { 
    var parent = $(this).parent(), 
     dataId = parent.data('tab'); 
    if (!parent.hasClass('active')) { 
     $('.tabwrapper .tabmenu ul.nav li').removeClass('active'); 
     parent.addClass('active'); 
     $('.tabwrapper .tabcontent .tabs').hide(); 
     $('.tabwrapper .tabcontent .tabs[data-tab="' + dataId + '"]').fadeIn(); 
    } 
}); 

}）;