Question

我有3个li项创建了一个水平菜单。

<div class="tab-container">
<ul class="tab-items">
  <li class="one">
    <a class="" href="#tab1">tab1</a>
  </li>
  <li class="two current">
    <a class="" href="#tab2">tab2</a>
  </li>
  <li class="three">
  <a class="current" href="#tab3">tab3</a>
  </li>
</ul>
</div>

我使用以下JS将当前类添加到活动li：

 $(".tab-container ul li:first-child").addClass("current");
        $('.tab-container ul li').click(function () {
            $('.tab-container ul li').removeClass('current');
            $(this).addClass('current');
        });

这对于我想要实现此ul的样式目的而言非常有用。问题是，如果用户点击不包含该文字的li区域，那么他们JS脚本会将current类添加到li，但不会到a。在这种情况下，我如何调整或添加JS以将a的{{1}}设置为li？

更新：

根据current选项显示的标签会被选中，具体取决于ul设置为a。例如，我在current项目上有以下CSS：

current

现在，如果我点击.tab-container ul li a.current{ color: #FFFFFF; }的支持图片：

ul

然后我可以让.tab-container ul li.two{ background: url(../images/tab.png) no-repeat scroll right top transparent; padding: 16px 92px; position: relative; }显示li州，但第一个current仍然是tab。因此，我需要active更新，当用户实际上没有点击锚文本时，它会实际选择JS类a的{{1}}。

Answer 1

我认为这就是你想要的 http://jsfiddle.net/dwebexperts/KSe94/5/

HTML

<div class="tab-container">
<ul class="tab-items">
  <li class="one">
    <a class="" href="#tab1">tab1</a>
  </li>
  <li class="two">
    <a class="" href="#tab2">tab2</a>
  </li>
  <li class="three">
  <a class="" href="#tab3">tab3</a>
  </li>
</ul>
</div>

JS

 $(".tab-container ul li:first-child").addClass("current");
        $('.tab-container ul li').click(function () {
            $('.tab-container ul li').removeClass('current');
            $(this).addClass('current');
        });

CSS

li {
    float: left;
     list-style: none outside none;
}
li > a {
    padding: 40px;
}
li.current{background:red;}

Answer 2

为了将当前类添加到a和li标记（这不是一个好主意恕我直言）：

$('.tab-container ul li').click(function () {
    $('.tab-container ul li, .tab-container ul li > a').removeClass('current');
    $(this).children('a').addBack().addClass('current');
});

如何在包含DIV的情况下将锚文本设置为当前单击？

2 个答案: