CODEWITHSUNDEEP
jquerycodeigniter-3gwtbootstrap3
user307709
user307709

Reputation: 265

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

Hi all I am a new of jquery I use boostrap 3 and I have the menu tab. and this is my code menu bootstarp and 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>

Example When I ckick on menu burger while loading window it is add class. but when finish loading window it remove class .How Can I add class when finish loading window ?

Upvotes: 0

Views: 1317

Answers (3)

Mathew Jacob
Mathew Jacob

Reputation: 54

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

Upvotes: 1

user307709
user307709

Reputation: 265

Hi all very thank q for helping .but now I can find correct code now the correct code is : 

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

Upvotes: 0

Yabada
Yabada

Reputation: 1758

When you click, the page reload, so your javascript get reset. You need to know which page is currently displayed from you PHP and set the class according to it:

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

If you reload your page you don't need (shouldn't) use javascript to change UI

Upvotes: 1

Related Questions