jquery - 如何在包含DIV点击时将 anchor 文本设置为当前？

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 以将 li 的 a 设置为 current ？

---

更新:

根据此 ul 选择显示的选项卡是根据哪个 a 设置为 current 选择的。例如，我在 current 项上有以下 CSS:

.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 显示当前 状态，但是第一个 tab 仍然是 active .所以，我需要一个 JS 更新，它会在用户执行操作时实际选择 current 类 li 的 a实际上并没有点击 anchor 文本。

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;}