Why will this hide/show div js only work in jsfiddle? [duplicate]

StackOverflow https://stackoverflow.com/questions/22432137

سؤال

I have a hide/show div script that works how I want it to here: http://jsfiddle.net/XwN2L/3537/

However when i'm coding it in anywhere else, whether I link javascript and css or embed it (as below) within the html file, it won't work.

<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>

Could anybody tell me what I am doing wrong ?

هل كانت مفيدة؟

المحلول

What JSFiddle Is Doing

onLoad

JSFiddle wraps any code in the JavaScript/jQuery box in $(window).load(function(){...});. This is because you have the second drop down in Frameworks & Extensions set to onLoad. With this setting, the script will wait for all media and data to load and the page to be rendered.

onDomReady

If you the onDomReady option, JSFiddle uses $(function(){...}); Which just waits for the DOM to load, not necessarily all the data.

What You Can Do

To make you code behave as the JSFiddle code does, you can use either of the above functions.

Another common way to write similar code is $(document).ready(function(){...});. like the onDomReady code, this only waits for the DOM to load. In my opinion, this is the most commonly used method because it is the most intuitive.

نصائح أخرى

Are you including jQuery?

If you are, make sure the DOM is loaded first.

$(function(){});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top