jQuery改变div内容答案

【问题标题】：jQuery change div contentjQuery改变div内容
【发布时间】：2013-03-01 16:43:55
【问题描述】：

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

【问题讨论】：

标签： jquery html jquery-plugins

【解决方案1】：

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

【讨论】：

我正在寻找如果我添加新行 Forth 它会显示 4 作为结果而不进行任何修改
你可以添加任意数量的锚点，只要 href 匹配一个 ID 就可以了。
是的，但是有没有办法删除这些：
FIRST
并打印出被点击按钮的 id？
@sw0o0sh - 嗯，是的！但这与 hashchange 无关，它只是一个常规的点击功能：$('a').on('click', function() { alert(this.id); $(this).remove(); });
对。但是如果我也想保留哈希怎么办？所以如果我去 index.php#third 它显示第三个。

【解决方案2】：

试试这个：

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

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

由于您的a 标记不应执行默认操作，因此您应该阻止a 执行相同操作。

【讨论】：