Question

我需要帮助更改我的代码，以便在点击链接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>

Answer 1

试试这个：

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

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

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

Answer 2

window.location.hash通常在没有哈希时返回空字符串，您需要检查锚点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与.tabs内的锚点href相匹配的元素，并且在示例中不是空的吗？

DEMONSTRATION

jQuery改变div内容

2 个答案: