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