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