Question

我正在使用http://jqueryfordesigners.com/jquery-tabs/作为项目，标签代码如下所示： -

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();

});
</script>

这很好用，但设计要求我在li标签上插入所选的类，而不是a标签。当我改变脚本来执行此操作时，每个选项卡的显示/隐藏都会中断。还有什么需要改变的想法？提前谢谢。

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation li').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation li').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();

});
</script>

Answer 1

您正在this.hash上访问<li>，这不会得到您想要的内容。

你的功能需要改变一点：

$(function () {
  var tabContainers = $('div.tabs > div');
  tabContainers.hide().filter(':first').show();

  // you still want to bind to the "a" element, not the li
  $('div.tabs ul.tabNavigation a').click(function () {
    tabContainers.hide();
    // this.hash is the #whatever portion of the href
    tabContainers.filter(this.hash).show();

    // remove selected class from LI's
    $('div.tabs ul.tabNavigation li').removeClass('selected');

    // look for our closest li parent (jQuery 1.3+) and add the selected class.
    $(this).closest('li').addClass('selected');

    return false;
  }).filter(':first').click();

});

Answer 2

如果没有更多信息，回答您的问题有点困难。最重要的缺失信息是您当前的HTML和CSS，因为现在只能猜测它为什么不起作用。

正如gnarf所提到的，你的代码应该稍微改变一下，让它使用你从这个代码获得的页面使用的示例HTML和CSS：

<script type="text/javascript" charset="utf-8">
$(function () {
        var tabContainers = $('div.tabs > div');
        tabContainers.hide().filter(':first').show();

        $('div.tabs ul.tabNavigation li a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div.tabs ul.tabNavigation li').removeClass('selected');
            $(this).closest('li').addClass('selected');
            return false;
        }).filter(':first').click();

    });
</script>

此外，你的css也应该改变，因为selected类现在设置在LI而不是A.我想知道为什么你不使用JQuery UI提供的tab-plugin。它可以让你配置很多东西，几乎不需要任何代码。

JQuery Tabs，改变所选元素的问题

2 个答案: