jQuery更改div内容 [英] jQuery change div content

问题描述

我需要更改代码的帮助，以便单击链接ID即可更改div内容 示例:我单击第一个链接，它打印出1，然后显示一个.并且它将具有唯一链接#first. 默认情况下，它也会显示默认"

I need help changing my code so that it changes div content on click to link id example: I click first link, it prints out 1 and so one. And also it will have an unique link #first. Also by default it shows "default"

<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>

推荐答案

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

window.location.hash normally returns an empty string when there is no hash, and you need to check the anchors href, not hash. It does'nt look like the anchors are inside the .tabs element either ?

$(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中的anchors href的元素，并且这不是像示例中那样为空吗?

I'm gussing you actually have elements with ID's matching the anchors href inside .tabs, and that is't not empty like in the example?

演示

这篇关于jQuery更改div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！