Question

大家好我是jquery的新手我使用boostrap 3并且我有菜单选项卡。这是我的代码菜单bootstarp和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>

示例当我在加载窗口时点击菜单汉堡时，它是添加类。但是当完成加载窗口时它会移除类。如何在完成加载窗口时添加类？

Answer 1

当您点击时，页面会重新加载，因此您的javascript会重置。您需要知道PHP当前显示的页面，并根据它设置类：

<li class='<?php echo (currentPage == "burger")? "active" : "" ?>'>>
    <a href="<?php echo base_url().'./site/burger' ?>">Burger</a>
</li>

如果您重新加载页面，则不需要（不应该）使用javascript来更改UI

Answer 2

  <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>

Answer 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>

如何在加载窗口后将类激活添加到选项卡引导程序？

3 个答案: