如何在加载 window 后将 class 活动添加到选项卡 bootstrap？

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>

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

Answer 1

单击时，页面会重新加载，因此您的 javascript 会重置。你需要知道你当前显示的是哪个页面 PHP 并据此设置 class:

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

如何在加载 window 后将 class 活动添加到选项卡 bootstrap？

How to add class active to tab bootstrap after loading window?

jquery

codeigniter-3

gwtbootstrap3