Hen*_*son 0 html javascript jquery show hide
我正在玩这个代码:http: //jsfiddle.net/VmVAq/
如您所见,在页面加载时,仅显示DIV 1.你可以注意到,样式是内联的所以我决定将它添加到标题:http: //jsfiddle.net/Ym96t/2/
这就是问题所在.现在在页面加载时,显示所有DIV,为什么？我是如何破解代码的？
如果您想在此处查看代码:
原版的:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
</head>
<body>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</body>
</html>
风格:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
<style>
#scoopout {
border: 1px solid blue;
background-color: #99CCFF;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<div id="scoopout">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1">Div #1</div>
<div id="scoopout">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2">Div #2</div>
<div id="scoopout">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3">Div #3</div>
</body>
</html>
在第一个小提琴中,你给出了一些元素display: none.你不会在第二个例子中这样做.
换句话说,你做的不仅仅是将样式规则移动到一个<style>元素 - 你还摆脱了一些CSS.
您可以添加一个只显示一个的"就绪"处理程序.
$(function() { showonlyone('newboxes1'); });