Почему этот скрытый / показанный div работает только в jsfiddle?

У меня есть скрипт скрытия / показа 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>

Кто-нибудь может сказать мне, что я делаю не так?

Источник

2 ответа

Решение

Что делает JSFiddle

в процессе

JSFiddle переносит любой код в поле JavaScript/jQuery в $(window).load(function(){...});, Это потому, что у вас есть второй раскрывающийся список в Frameworks & Extensions, установленный на onLoad. С этим параметром скрипт будет ожидать загрузки всех носителей и данных и отображения страницы.

onDomReady

Если у вас опция onDomReady, JSFiddle использует $(function(){...}); Который просто ждет загрузки DOM, не обязательно всех данных.

Что ты можешь сделать

Чтобы заставить ваш код вести себя так же, как код JSFiddle, вы можете использовать любую из вышеперечисленных функций.

Другой распространенный способ написания подобного кода $(document).ready(function(){...});, как и код onDomReady, он ожидает только загрузки DOM. На мой взгляд, это наиболее часто используемый метод, потому что он наиболее интуитивно понятен.

Источник

Вы включаете JQuery?

Если да, убедитесь, что DOM загружен первым.

$(function(){});
Источник
Другие вопросы по тегам