gpt4 book ai didi

javascript - 样式使 javascript 代码无法正常运行

转载 作者:行者123 更新时间:2023-11-28 12:41:46 24 4
gpt4 key购买 nike

我正在玩这个代码: 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>

最佳答案

在第一个 fiddle 中,您给出了一些元素 display: none 。在第二个示例中您没有这样做。

换句话说,您所做的不仅仅是将样式规则移至 <style>元素 — 您还删除了一些 CSS。

您可以添加一个仅显示一个的“就绪”处理程序。

$(function() { showonlyone('newboxes1'); });

关于javascript - 样式使 javascript 代码无法正常运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11866483/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com