JQuery - добавить событие щелчка к LI или ОХВАТИТЬ элементы?
Итак, я немного поработал с вашим кодом, и я просто отправлю его вам, и постараюсь объяснить как можно больше изменений :) Я бы тоже не назвал себя экспертом по начальной загрузке. , Так что это весело делать.
Во-первых, я заметил, что <link href= не работал в голове. Итак, я изменил это на загрузочную CDN и последнюю версию <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Обязательно совпадите с Javascript из того же источника, если вы хотите позже использовать складную навигацию или карусели или что-то подобное ... 116]
Затем я изменил сетку, чтобы она выглядела примерно так:
<div class="container-fluid">
<div class="row">
<div class="header">Header</div>
</div>
<div class="row">
<div class="navigation-bar">Nav</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm mbody">
<div class="article">Article</div>
</div>
<div class="col-sm mbody">
<div class="row">
<div class="aside">Aside</div>
</div>
<div class="row">
<div class="section">Section</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="footer">Footer</div>
</div>
</div>
На самом деле мы хотим получить две строки внутри одного столбца. Эти изменения приблизили нас к тому, что мы хотим , Следующим шагом было дать 100% ширины вашего внутреннего div
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.mbody {
margin: 0;
padding: 0;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
width: 100%;
}
.navigation-bar {
background-color: khaki;
height: 50px;
text-align: center;
width: 100%;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
width: 100%;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
width: 100%;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
width: 100%;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
width: 100%;
}
. Обратите внимание, что в конце концов я изменил класс nav на «navigation-bar», чтобы применить ваш стиль, так как nav это предопределенный класс в начальной загрузке и переопределяет ваш стиль. Затем я добавил класс «mbody» в два столбца и установил поля и отступы в 0, чтобы все совпало без пробелов слева или справа.
Мой результат похож на то, что вы разместили на двух картинках выше. Надеюсь, это полезно. :)
3 ответа
You sure you have jquery 1.3 included in your code? The following works fine (direct copy and paste from your question) for me when I click on any of the LIs:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function updateNavigation(title) {
alert(title);
}
$("#Navigation li").live('click', function(e) {
e.preventDefault;
this.blur();
return updateNavigation($(this).attr('title'));
});
</script>
</head>
<body>
<div id="Navigation">
<ul>
<li class="navPrevNext inactive">|< First Page</li>
<li class="navPrevNext inactive">< Prev Page</li>
<li class="navIndex selected" title="0 ">1</li>
<li class="navIndex notselected" title="1 ">2</li>
<li class="navIndex notselected" title="2 ">3</li>
<li class="navPrevNext active" title="1">Next Page ></li>
<li class="navPrevNext active" title="2">Last Page >|</li>
</ul>
</div>
</body>
</html>
Are you sure your updateNavigation function is working right? Maybe it's being triggered but something is wrong within it...
I did the same thing as @Parrots and it works for me. You might, however, want to change your selector to:
$("#Navigation li[title]" ).live('click', function(e) {
e.preventDefault;
this.blur();
return updateNavigation($(this).attr('title'));
});
So that the handler is only applied to elements that have a title attribute.
У меня была аналогичная проблема, когда я использовал всплывающий список, выбранный пользователем. Обычно пользователь щелкает поле ввода, и отображается ul.
Это отлично работало с анимацией 500 мс, но при переключении на 250 мс анимация прокрутки вниз была слишком быстрой, и, очевидно, событие щелчка никогда не запускалось на li.