单击另一个切换 link 时删除切换 class

Question

我正在制作一个 tumblr 主题，并且已经成功实现了 3 个切换 link。他们工作正常，但我想知道是否有可能做到这一点，所以如果第一个开关 link 打开，我点击第二个开关 link，第一个将关闭，而不是只是堆叠？

相关代码：

脚本：

$(document).ready(function(){
    $(".changer").click(function(){
        $(".slidey").toggleClass("change_it");
    });
    $(".changer2").click(function(){
        $(".slidey2").toggleClass("change_it");
    });
    $(".changer3").click(function(){
        $(".slidey3").toggleClass("change_it");
    });
});

HTML

<li><a href="#" class="changer"><i class="fa fa-envelope fa-fw"></i> Mail</a></li>
<li><a href="#" class="changer2"><i class="fa fa-link fa-fw"></i> Links</a></li>
<li><a href="#" class="changer3"><i class="fa fa-th fa-fw"></i> Blogroll</a></li>


   <div class="slidey">
       Yo yo
   </div>
   <div class="slidey2">
       linkies
   </div>
   <div class="slidey3">
       blogroll
   </div>

here is the page

另外需要注意的是我js不太好/ jquery

Answer 1

是的。这样使用：

$(document).ready(function(){
  $(".changer").click(function(){
    if ($(".slidey" + $(this).data("slidey")).hasClass("change_it"))
    {
      $(".slidey" + $(this).data("slidey")).removeClass("change_it");
      return false;
    }
    $(".slidey1, .slidey2, .slidey3").removeClass("change_it");
    $(".slidey" + $(this).data("slidey")).addClass("change_it");
    return false;
  });
});

* {font-family: 'Segoe UI', sans-serif; text-decoration: none;}
.change_it {font-weight: bold;}

.tabs, .tabs li {display: inline-block; margin: 0; padding: 0; list-style: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tabs">
  <li><a href="#" class="changer" data-slidey="1"><i class="fa fa-envelope fa-fw"></i> Mail</a></li>
  <li><a href="#" class="changer" data-slidey="2"><i class="fa fa-link fa-fw"></i> Links</a></li>
  <li><a href="#" class="changer" data-slidey="3"><i class="fa fa-th fa-fw"></i> Blogroll</a></li>
</ul>

<div class="slidey1">Slidey 1</div>
<div class="slidey2">Slidey 2</div>
<div class="slidey3">Slidey 3</div>

Answer 2

我会避免代码重复，添加引用您要滑动的部分的 ID 的数据部分，否则每次您想要新的部分时都会重复自己。

因此在您的链接中：

<li><a href="#" class="changer" data-section="#mail"><i class="fa fa-envelope fa-fw"></i> Mail</a></li>
<li><a href="#" class="changer" data-section="#links"><i class="fa fa-link fa-fw"></i> Links</a></li>
<li><a href="#" class="changer" data-section="#blogroll"><i class="fa fa-th fa-fw"></i> Blogroll</a></li>

你的部分看起来像：

<div id="blogroll">blogroll</div>

最后，您的 jquery 代码将如下所示：

$(document).ready(function() {
  $(".changer").click(function() {

    var sectionToChange = $(this).data('section');

    $(".change_it:not("+sectionToChange+")").removeClass('change_it');

    $(sectionToChange).toggleClass("change_it");
  });
});

从而避免每次创建新的可滑动部分时都需要返回它。

更新：概念演示

$(document).ready(function() {
  $(".changer").click(function() {

    var sectionToChange = $(this).data('section');

    $(".change_it:not("+sectionToChange+")").removeClass('change_it');

    $(sectionToChange).toggleClass("change_it");
  });
});

* {
  font-family: 'Segoe UI', sans-serif;
  text-decoration: none;
}
.change_it {
  font-weight: bold;
}
.tabs,
.tabs li {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="tabs">
  <li><a href="#" class="changer" data-section="#mail"><i class="fa fa-envelope fa-fw"></i> Mail</a>
  </li>
  <li><a href="#" class="changer" data-section="#links"><i class="fa fa-link fa-fw"></i> Links</a>
  </li>
  <li><a href="#" class="changer" data-section="#blogroll"><i class="fa fa-th fa-fw"></i> Blogroll</a>
  </li>
    <li><a href="#" class="changer" data-section="#contacts"><i class="fa fa-th fa-fw"></i> Contacts</a>
  </li>
    <li><a href="#" class="changer" data-section="#wiki"><i class="fa fa-th fa-fw"></i> Wiki</a>
  </li>
    <li><a href="#" class="changer" data-section="#about"><i class="fa fa-th fa-fw"></i> About</a>
  </li>
</ul>

<div id="mail">Mail</div>
<div id="links">Links</div>
<div id="blogroll">Blogroll</div>
<div id="contacts">Contacts</div>
<div id="wiki">Wiki</div>
<div id="about">About</div>

单击另一个切换 link 时删除切换 class

Remove a toggle class when clicking another toggle link

javascript

jquery

html

toggle