我有一个隐藏/显示 div 脚本，可以按照我想要的方式工作:http://jsfiddle.net/XwN2L/3537/
但是，当我在其他地方编码时，无论我链接 javascript 和 css 还是将其嵌入到 html 文件中(如下所示)，它都不起作用。
<title></title>
<style type="text/css">
ul.buttons {
display: inline-block;
height: 35px;
position: fixed;
bottom: 18px;
left: 43px;
z-index: 40;
list-style-type: none;
}
.buttons li {
list-style-type: none;
display: inline;
}
ul#divMenu {
height: 40px;
background-color: #ddd;
position: fixed;
padding-left: 76px;
padding-right: 15px;
bottom: 15px;
left: 17px;
right: 17px;
z-index: 3;
line-height: 39px;
vertical-align: middle;
}
#divMenu li {
list-style-type: none;
display: inline;
font-family: ProximaNovaLtRegular;
font-size: 12px;
margin-right: 2em;
}
#divInfo {
height: 40px;
background-color: #ddd;
position: fixed;
padding-left: 76px;
padding-right: 15px;
bottom: 15px;
left: 17px;
right: 17px;
z-index: 3;
line-height: 39px;
vertical-align: middle;
}
</style>
<script type='text/javascript'>
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
$('.hide').click(function () {
$('.targetDiv').hide();
});
</script>
</head>
<body><ul class="buttons">
<li><img src="menu.png" class="show" target="Menu"></a></li>
<li><img src="info.png" class="show" target="Info"></a></li>
<li><img src="close.png" class="hide" ></a></li>
</ul>
<ul id="divMenu" class="targetDiv">
<li><a href="print.html">1</a></li>
<li><a href="print.html#four">2</a></li>
<li><a href="identity.html#sixteen">3</a></li>
<li><a href="print.html#seven">4</a></li>
<li><a href="identity.html">5</a></li>
</ul>
<div id="divInfo" class="targetDiv">Lorum Ipsum 2</div>
</body>
</html>
有人能告诉我我做错了什么吗？
最佳答案
JSFiddle 在做什么
加载
JSFiddle 将 JavaScript/jQuery 框中的所有代码包装在 $(window).load(function(){...}); 中。这是因为您将“框架和扩展”中的第二个下拉菜单设置为“onLoad”。通过此设置，脚本将等待所有媒体和数据加载以及页面渲染。
onDomReady
如果使用 onDomReady 选项，JSFiddle 将使用 $(function(){...}); 它只是等待 DOM 加载，而不一定是所有数据。
你能做什么
要使代码的行为与 JSFiddle 代码的行为相同，您可以使用上述任一函数。
编写类似代码的另一种常见方法是$(document).ready(function(){...});。与 onDomReady 代码一样，这只等待 DOM 加载。在我看来，这是最常用的方法，因为它最直观。
关于javascript - 为什么这个隐藏/显示 div js 只能在 jsfiddle 中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22432137/