jQuery Active導航項與標籤切換結合？

我有三個選項卡，正在嘗試使用jQuery使活動選項卡成爲已被點擊的選項（淺灰色），然後顯示正確的區域內容。我不想將鏈接定位到目標區域。據我所知，我需要改變被點擊的標籤的活動狀態，並切換哪個div是可見的（而url不會改變），我在正確的軌道上？我只是不確定從哪裏開始，如果任何人有提示？jQuery Active導航項與標籤切換結合？

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Practice</title> 
    <style> 
    html {margin:2em; font-family:Helvetica, Arial, sans-serif;} 
    h1 {margin:0;} 
    h2 {color:#369;} 
    hr {margin:2em 0;} 
    nav ul {margin:0; padding:0; list-style:none;} 
     nav li {display:inline-block;} 
     nav li a {display:block; padding:1em; color:#ccc; text-decoration:none; background-color:gray;} 
     .tabs-sections {padding:0 1em; border:1px solid gray;} 
     .active a {color:#000; background-color:lightgray;} 
     .s2, .s3 {display:none;} 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
</head> 
<body> 
    <header><h1>jQuery Exercise</h1></header> 


    <hr> 

    <h2>Test Tabs</h2> 

    <div class="tabs"> 
    <nav> 
     <ul> 
     <li class="active"><a href="#one">One</a></li> 
     <li><a href="#two">Two</a></li> 
     <li><a href="#three">Three</a></li> 
     </ul> 
    </nav> 

    <div class="tabs-sections"> 
     <section id="one" class="s s1"> 
     <h2>Section One</h2> 
     <p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </section> 
     <section id="two" class="s s2"> 
     <h2>Section Two</h2> 
     <p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </section> 
     <section id="three" class="s s3"> 
     <h2>Section Three</h2> 
     <p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </section> 
    </div> 
    </div> 

    <script> 
    // code 
    </script> 

</body> 
</html>

來源

2015-04-06 Mark B

好的，你的jQuery代碼在哪裏？ –

這就是：

$('nav ul li a').click(function() { 

    id=$(this).attr('href'); 

    $('nav ul li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    $('.s').css('display','none'); 
    $('.s' + id).css('display','block'); 

});

演示：http://jsfiddle.net/kef3wytj/編輯：您可以使用隱藏（）和show（），而不是CSS（） - 更短和更清潔。

來源

2015-04-06 21:32:49 sinisake

這裏指南：NAV>李

綁定click事件>一
防止默認情況下它（防止連接下來的目標部分）
查找使用顯示部分'href'屬性
顯示該部分並隱藏所有部分
將類'active'添加到父'li'中，單擊a並刪除'active'從它的兄弟姐妹班。

來源

2015-04-06 21:32:42 roxxypoxxy

jQuery Active導航項與標籤切換結合？

回答

相關問題