1

我有这个脚本，它使用 a:href 属性标签来交换 div。我想改用带有 title 属性的 div 标签。

工作代码

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs2 ul li:first').addClass('active');

    $('#tabs2 ul li a').click(function () {
        $('#tabs2 ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).fadeIn(1000);
        return false;
    });
});

我尝试将其与 div 标签一起使用但不起作用

<div id="tabs2">
  <ul class="nav">
    <li class="pc"><div class="tab-1" title="tab-1">text</div></li>
  </ul>
</div>

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs2 ul li:first').addClass('active');

    $('#tabs2 ul li div').click(function () {
        $('#tabs2 ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('title');
        $('#tabs div').hide();
        $(currentTab).fadeIn(1000);
        return false;
    });
});

没有收到任何错误，但由于某种原因无法正常工作。

4

2 回答 2

2

您在这里的选择器开头缺少一个“#”：

$(currentTab).fadeIn(1000);

这导致$('tab-1')何时应该是 $('#tab-1')

我想它在您使用该a[href]属性时有效，因为您可能正在使用类似href="#tab-1".

于 2012-08-14T23:04:54.697 回答
1

在您提供的 HTML 中，title属性是tab-1.
因此，当您获得该值时，currrentTab将只包含 text tab-1。

添加#以选择 id 为 的元素tab-1：

$('#' + currentTab).fadeIn(1000);

或添加.以选择具有 类的元素tab-1：

$('.' + currentTab).fadeIn(1000);
于 2012-08-14T23:05:22.023 回答