0

我正在尝试使用 jQuery 选项卡，但有一个我无法解决的问题。

在文档正文的某个地方，我有：

<ul class="tabs-horizontal">
    <li id="a" class="current"><a href="#">Tab A</a></li>
    <li id="b"><a href="#">Tab B</a></li>
</ul>

在我的脚本部分，我有：

<script type="text/javascript">

    $(document).ready(function(){

        var activeTabIndex = -1;
        var tabNames = ["a","b"];

        $(".tabs-horizontal > li").click(function(e){
            for(var i=0;i<tabNames.length;i++) {
                if(e.target.id == tabNames[i]) {
                    activeTabIndex = i;
                } else {
                    $("#"+tabNames[i]).removeClass("current");
                }
            }
            $("#"+tabNames[activeTabIndex]).addClass("current");
            return false;
        });
    });

</script>

它不起作用，因为我正在e.target.id与tabNames元素进行比较。当我调试时，我发现e.target.idreturn -1。

那么，我怎样才能获得这两个liID（即"a"和"b"）？

谢谢。

4

4 回答 4

6 
$(".tabs-horizontal > li").click(function(e) {
      $(this).addClass("current").siblings().removeClass("current");
      return false;
});
于 2013-06-19T06:37:22.573 回答
4

在 jQuery 事件处理程序中，this将是您挂钩事件的 DOM 元素。由于您将事件挂钩到li元素上，this.id因此将是它们的 ID。

但你不需要身份证。你可以只使用遍历来做你想做的事情。我正要展示如何，但undefined 已经有了.

于 2013-06-19T06:37:30.307 回答
2

你可以这样做：

$(".tabs-horizontal > li").click(function () {
    $('li.current').removeClass("current");
    $(this).addClass("current");
    return false;
});
于 2013-06-19T06:39:54.150 回答
1

e.target 指向 li 内的 a 链接。你应该使用e.target.parentElement.id

于 2013-06-19T06:42:07.060 回答