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

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> 

例子当我在菜单汉堡ckick同时加载窗口是添加类。但是当完成加载窗口它删除类。如何在完成加载窗口时添加类？

Answer 1

大家好非常感谢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> 

Answer 2

当你点击，页面重新加载，所以你的JavaScript得到重置。 你需要知道哪些页面正在从你的PHP显示和设置根据它的类：

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

如果重新载入网页，你不需要（不应该）使用JavaScript来改变UI

Answer 3

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