jQuery 活动导航项与选项卡切换相结合？

Question

我有三个选项卡，我正在尝试使用 jQuery 使活动选项卡成为已单击的选项卡（浅灰色），然后正确的部分内容应该 display.I 不想要将 link 锚定到目标部分。据我了解，我需要更改被单击的选项卡的活动状态并切换哪个 div 可见（而 url 不会改变），我在正确的轨道上吗？我只是不确定从哪里开始，如果有人有提示？

<!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>

Answer 1

这里是指南：

在 nav > li > a 上绑定点击事件
防止默认它（防止链接到目标部分）
使用 'href' 属性找到要显示的部分
显示该部分并隐藏所有部分
将 class 'active' 添加到单击 a 的父级 'li' 并从其兄弟姐妹中删除 'active' class。

Answer 2

这里是：

$('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/ 编辑：您可以使用 hide() 和 show()，而不是 css() - 更短更清晰。

jQuery 活动导航项与选项卡切换相结合？

jQuery Active nav item combined with tab switching?

jquery

tabs

nav