Question

我有一个隐藏/显示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>

有人能告诉我我做错了吗？

Answer 1

JSFiddle正在做什么

的onLoad

JSFiddle在$(window).load(function(){...});的JavaScript / jQuery框中包装任何代码。这是因为你在Frameworks＆amp;扩展程序设置为onLoad。使用此设置，脚本将等待加载所有媒体和数据以及要呈现的页面。

onDomReady

如果你是onDomReady选项，JSFiddle使用$(function(){...});等待加载DOM，而不是所有数据。

你能做什么

为了让您的代码与JSFiddle代码一样，您可以使用上述任一功能。

编写类似代码的另一种常见方法是$(document).ready(function(){...});。与onDomReady代码一样，这只等待加载DOM。在我看来，这是最常用的方法，因为它是最直观的。

Answer 2

你是否包括jQuery？

如果是，请确保首先加载DOM。

$(function(){});

为什么这个hide / show div js只能在jsfiddle中运行？

2 个答案: