Question

我有三个标签，我正在尝试使用jQuery使活动标签成为已点击的标签（浅灰色），然后显示正确的部分内容。我不想将链接锚定到目标部分。根据我的理解，我需要更改单击的选项卡的活动状态并切换哪个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

这里的指南：

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

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 Active导航项与标签切换相结合？

2 个答案: