Почему это скрытие/отображение div js будет работать только в 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>

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


javascript html show-hide jsfiddle
person user3358714    schedule 16.03.2014    source источник
comment
Попробуйте обернуть его с помощью $(document).ready(function() { ... } jsFiddle запускает код onLoad в приведенном вами примере. Кроме того, убедитесь, что вы включаете jQuery перед скриптом.   -  person Josh Crozier    schedule 16.03.2014
comment
Я очень рекомендую прочитать учебник по jQuery, потому что он точно говорит вам, что делать, чтобы начать работу с jQuery: learn.jquery.com/about-jquery/how-jquery-works   -  person Felix Kling    schedule 16.03.2014
comment
@FelixKling это может быть дубликат, но ответ здесь намного яснее, чем ответ на этот вопрос. Ответы, которые не совсем ясны, не должны использоваться в качестве дублирующей ссылки. ИМО.   -  person Neil Lunn    schedule 16.03.2014
comment
@NeilLunn: вы всегда можете улучшить другой ответ;)   -  person Felix Kling    schedule 16.03.2014

Ответы (2)


arrow_upward
0
arrow_downward

Что делает JSFiddle

при загрузке

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

ондомготов

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

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

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

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

person zsaat14    schedule 16.03.2014
comment
$(function() { // Handler for .ready() called. }); Мне нравится такая форма нагрузки. Меньше символов для загрузки и легко писать - person web2students.com; 16.03.2014
comment
Верно, но это только ждет DOM (см. редактирование). Если вам нужно сначала загрузить все медиафайлы и другие данные, вам понадобится $(window).load(function(){...});. Есть тонкая разница. - person zsaat14; 16.03.2014

arrow_upward
0
arrow_downward

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

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

$(function(){});
person VtoCorleone    schedule 16.03.2014