0

大家好，我是 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>

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

4

3 回答 3

1

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

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

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

于 2015-11-03T10:32:49.587 回答
1 
  <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>
于 2015-11-03T10:37:09.280 回答
0

大家好，非常感谢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>
于 2015-11-03T11:06:14.863 回答