我想使用不同的链接切换我的内容。如果 div2 到 div5 的内容被隐藏，则必须切换回 div1。
加载页面时，将显示 newboxes1 的内容。如果我点击链接 over2 到 over5 ，内容必须在它们之间切换。如果 newboxs2 到 newbox5 的内容被隐藏，脚本应自动返回到 newbox1。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).toggle(200);
}
else {
$(this).hide(600);
if ($(this).css('display') == 'none') {
$('#newboxes1').show();
}
else {
}
}
});
}
</script>
<style>
#newboxes1{
border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;
}
#newboxes2{
border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;
}
#newboxes3{
border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;
}
#newboxes4{
border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;
}
#newboxes5{
border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;
}
.hidden{
display:none;
}
.shown{
display:block;
}
</style>
</head>
<body>
<div >
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >Home</a>
</div>
<div name="newboxes" id="newboxes1" class="shown">Div #1</div>
<div name="newboxes" id="newboxes2" class="hidden">Div #2</div>
<div name="newboxes" id="newboxes3" class="hidden">Div #3</div>
<div name="newboxes" id="newboxes4" class="hidden">Div #4</div>
<div name="newboxes" id="newboxes5" class="hidden">Div #5</div>
<div>
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >over 1</a>
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >over 2</a>
<a id="myHeader4" href="javascript:showonlyone('newboxes4');" >over 3</a>
<a id="myHeader5" href="javascript:showonlyone('newboxes5');" >over 4</a>
</div>
</body>
</html>
最佳答案
不要将 JavaScript 函数作为 anchor 的 HREF 运行，而是将 .click 事件附加到脚本中的每个 anchor ，并使用 data- 属性来指示您想要的 DIV操纵。
试试这个:http://jsfiddle.net/mblase75/H5cN2/1/
HTML:
<div>
<a id="myHeader1" href="javascript:" data-hide="newboxes1" >Home</a>
</div>
<div name="newboxes" id="newboxes1" class="shown">Div #1</div>
<div name="newboxes" id="newboxes2" class="hidden">Div #2</div>
<div name="newboxes" id="newboxes3" class="hidden">Div #3</div>
<div name="newboxes" id="newboxes4" class="hidden">Div #4</div>
<div name="newboxes" id="newboxes5" class="hidden">Div #5</div>
<div>
<a id="myHeader2" href="javascript:" data-hide="newboxes2">over 1</a>
<a id="myHeader3" href="javascript:" data-hide="newboxes3">over 2</a>
<a id="myHeader4" href="javascript:" data-hide="newboxes4">over 3</a>
<a id="myHeader5" href="javascript:" data-hide="newboxes5">over 4</a>
</div>
JS:
$(document).ready(function() {
$('a[id^="myHeader"]').click(function() {
$div = $('div#' + $(this).data('hide'));
$div.siblings('[name^="newboxes"]').hide(200).end().toggle(200, function() {
if (!$div.is(':visible')) {
$('#newboxes1').toggle(200);
}
});
});
});
关于Jquery:切换不同的链接/div 并返回特定的链接/div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8066518/