如何在加載窗口後將類活動添加到選項卡引導？

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>