Question

我有这个脚本使用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;
    });
});

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

Answer 1

你在选择器的开头错过了一个'＃'：

$(currentTab).fadeIn(1000);

这应该是$('tab-1')，应该是$ ('#tab-1')

我认为当您使用a[href]属性时它会起作用，因为您可能正在使用href="#tab-1"之类的内容。

Answer 2

在您提供的HTML中，title属性为tab-1 因此，当您获得该值时，currrentTab将仅包含文本tab-1。

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

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

或添加.以选择类tab-1：

的元素

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

使用div：title标签属性而不是：href属性来切换div

2 个答案: