jQuery Active导航项与标签切换相结合？-Java 学习之路

我有三个选项卡，我正在尝试使用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>

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（） - 更短更干净 .

回复于 2024-05-08T12:31:07+08:00

0
这里的指南：
- 在nav> li> a上绑定点击事件
- 防止默认（防止链接目标部分）
- 使用'href'属性查找要显示的部分
- 显示该部分并隐藏所有部分
- 将类'active'添加到单击a的父'li'并从其兄弟中删除'active'类 .
回复于 2024-05-08T12:31:07+08:00

jQuery Active导航项与标签切换相结合？

2 回答

相关问题