Как добавить активный класс во вкладку начальной загрузки после загрузки окна?

Привет всем Я новый 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 для изменения пользовательского интерфейса

Источник
Другие вопросы по тегам