更改所选菜单选项卡的颜色答案

【问题标题】：change color of selected menu tab更改所选菜单选项卡的颜色
【发布时间】：2011-04-14 08:13:19
【问题描述】：

我从另一个问题中得到了这个 sn-p：

<script type='text/javascript' >
$(document).ready(function () {
 $("div.content ul li a")
 .mouseover(function () {
  var t = $(this);
  if (!t.hasClass("clicked")) {  // very easy to check if element has a set of styles
   t.addClass('mouseover');
  }
 })
 .mouseout(function () {  // attach event here instead of inside mouse over
  $(this).removeClass('mouseover');
 });

 $("div.content ul li a").click(function () {
  var t = $(this);
  t.toggleClass("clicked");
  if (t.hasClass("clicked")) {
   t.removeClass('mouseover');
  } else {
   t.addClass('mouseover');
  }
 });
});
</script>

我想要的最后一件事是在单击另一个选项卡时恢复选项卡的正常 css。例如，当我单击 tab1 时，选项卡的 bgcolors 是白色的，当我进入 Tab2 时，它会变为黑色。.Tab1 变为白色，Tab2 变为黑色

<ul> 
 <li>
  <a href="#Tab1">Tab 1</a>
 </li>
 <li>
  <a href="#Tab2">Tab 2</a>
 </li>
</ul>

假设这是 CSS 部分

ul li a {background-color: white;}
ul li a.mouseover {background-color: black;}
ul li a.mouseout {background-olor: white;}
ul li a.clicked {background-color: black;}

【问题讨论】：

您的 .mouseover 和 .clicked 类是相同的，但您的代码似乎可以防止它们之间的冲突（当 .clicked 存在时不添加 .mouseover）。你打算让这些类相同吗？
这个问题解决了吗？
抱歉，有段时间没上网了如果服务器大部分时间处于离线状态 xD

标签： jquery css menu selected

【解决方案1】：

您实际上可以为此大大简化您的 Javascript。这应该会达到您想要的效果。

<script type="text/javascript">
    $(document).ready(function() {
        $("div.content ul li a")
         .mouseover(function() {
             $(this).addClass('mouseover');
         })
         .mouseout(function() {
             $(this).removeClass('mouseover');
         });

        $("div.content ul li a").click(function(e) {
            e.preventDefault(); //prevent the link from actually navigating somewhere
            $(this).toggleClass("clicked");
            $("div.content ul li a").not(this).removeClass("clicked"); //remove the clicked class from all other elements
        });
    });
</script>

这里的 Javascript 将执行以下操作：

悬停链接时添加“鼠标悬停”类
当您不再悬停链接时删除“鼠标悬停”类
当您单击一个链接时，它将切换“已单击”类并将其从可能具有该类的任何其他链接中删除 - 这会将您的其他选项卡恢复到它们的“正常”状态。

【讨论】：

【解决方案2】：

@wsanville

双击同一个标签的问题呢？

如果我在单击选项卡时从选项卡中删除底部边框（指示选定的），那很好。但是当我再次单击它时，它应该保持原样（没有底部边框），但是由于切换，现在看起来您还没有选择选项卡，但您仍然在那里。

【讨论】：

我知道我迟到了，但为了帮助解决这个问题的人，您可以只使用 $(this).addClass("clicked"); 而不是 toggleClass。

【解决方案3】：

仅使用 CSS 就可以实现您想要的：

ul li a {background-color: white;}
ul li a:hover {background-color: black;}
ul li a:focus {background-color: black;}

Demo

【讨论】：