jQuery change div content

别说谁变了你拦得住时间么 提交于 2019-12-30 14:44:29

问题


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>

回答1:


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');
});

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?

DEMONSTRATION




回答2:


Try this out:

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

you can include this in a function which accepts the id and sets the value at the appropriate location in the dom tree

Since your a tag should not perform the default action, you should prevent a from the same.



来源:https://stackoverflow.com/questions/15162585/jquery-change-div-content

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!