0

我需要帮助更改我的代码，以便在单击链接 id 示例时更改 div 内容：我单击第一个链接，它打印出 1 等等。它还将有一个独特的链接#first。默认情况下，它显示“默认”

<script src="jquery.js"></script>
<script src="jquery.bbq.js"></script>
<script>
$(function () {
  var tabContainers = $('div.tabs > div');
  tabContainers.hide().filter(':first').show();

  $(window).bind('hashchange', function () {
    var hash = window.location.hash || '#first';

    tabContainers.hide();
    tabContainers.filter(hash).show();
    $('div.tabs ul.tabNavigation a').removeClass('selected');
    $('a[hash=' + hash + ']').addClass('selected');
  });

  $(window).trigger( "hashchange" );
});
</script>
<ul class="tabNavigation">
    <li><a href="#first" id="1">First</a></li>
    <li><a href="#second" id="2">Second</a></li>
    <li><a href="#third" id="3">Third</a></li>
</ul>
<div class="tabs">
    Change content here
</div>
4

2 回答 2

1

试试这个：

$('#1').click(function(){ $('.tabs').html('Your Text'); })

您可以将其包含在一个函数中，该函数接受id并在 dom 树中的适当位置设置值

由于您的a代码不应执行默认操作，因此您应该防止a同样的操作。

于 2013-03-01T16:49:50.317 回答
1

window.location.hash通常在没有哈希时返回一个空字符串，并且您需要检查 anchors href，而不是hash. 看起来锚也不在.tabs元素内部吗？

$(function () {
    $(window).on('hashchange', function () {
        var tabContainers = $('.tabs > div'),
            hash = window.location.hash != '' ? window.location.hash : '#first';

        tabContainers.hide();
        tabContainers.filter(hash).show();
        $('.tabNavigation li a').removeClass('selected');
        $('a[href="' + hash + '"]', '.tabNavigation').addClass('selected');
    }).trigger('hashchange');
});

我猜你实际上有 ID 与内部的锚点 href 匹配的元素.tabs，这不是像示例中那样为空吗？

示范

于 2013-03-01T17:01:48.617 回答