Как добавить активный класс во вкладку начальной загрузки после загрузки окна?
Привет всем Я новый JQuery Я использую Boostrap 3, и у меня есть вкладка меню. и это мой код меню начальной загрузки и jquery:
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").click(function(){
$(this).addClass("active");
});
});
</script>
<div id="nav_left" class="col-md-9">
<ul id="navigation" class="nav nav-tabs">
<li id="tabs"><a href="<?php echo base_url().'./site/burger' ?>">Burger</a></li>
<li><a href="<?php echo base_url().'./site/sides' ?>">Sides</a></li>
<li><a href="<?php echo base_url().'./site/beverages' ?>">Beverages</a></li>
<li><a href="<?php echo base_url().'./site/make_own_burger' ?>">Make Your Own Burger</a></li>
<li><a href="<?php echo base_url().'./site/download' ?>">Download Menu</a></li>
</ul>
Пример Когда я нажимаю на бургер меню при загрузке окна, это добавить класс. но когда окно загрузки завершено, он удаляет класс. Как я могу добавить класс, когда окно загрузки закончится?
3 ответа
Решение
Привет всем, большое спасибо q за помощь. Но теперь я могу найти правильный код, теперь правильный код:
<li class="<?php if($this->uri->segment(2)=="burger"){echo "active";}?>" href="<?=base_url('search')?>"><a href="<?php echo base_url().'./site/burger' ?>">Burger</a></li>
<style>
.menuITem {
color: red;
}
.active {
color: green;
}
</style>
<div id="nav_left">
<ul id="navigation" class="nav nav-tabs">
<li><a id="m1" class="menuITem" href="http://localhost:62657/WebForm2.aspx">Burger</a></li>
<li><a id="m2" class="menuITem" href="http://localhost:62657/WebForm2.aspx">Sides</a></li>
<li><a id="m3" class="menuITem" href="http://localhost:62657/WebForm2.aspx">Beverages</a></li>
<li><a id="m4" class="menuITem" href="http://localhost:62657/WebForm2.aspx">Make Your Own Burger</a></li>
<li><a id="m5" class="menuITem" href="http://localhost:62657/WebForm2.aspx">Download Menu</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var selMenu = readCookie("selMenu");
if (selMenu) {
$("#" + selMenu).addClass("active")
}
$(".menuITem").click(function (e) {
createCookie("selMenu", $(this)[0].id, 0)
});
});
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = encodeURIComponent(name) + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return null;
}
</script>
Когда вы нажимаете, страница перезагружается, поэтому ваш JavaScript сбрасывается. Вам нужно знать, какая страница в данный момент отображается на вашем PHP и установить класс в соответствии с ним:
<li class='<?php echo (currentPage == "burger")? "active" : "" ?>'>>
<a href="<?php echo base_url().'./site/burger' ?>">Burger</a>
</li>
Если вы перезагрузите страницу, вам не нужно (не нужно) использовать JavaScript для изменения пользовательского интерфейса