CODEWITHSUNDEEP
phpjquery
Tammy
Tammy

Reputation: 1132

PHP connection to make my li class active on evry page change

This is my Menu items .

 <html>
    <body>
      <div class="container">

                        <ul class="nav navbar-nav ct-navbar--fadeIn">
                            <li class="active">
                                <a href="index.php?con=1">HEM</a>

                            </li>
                            <li><a href="index.php?con=3">OM OSS</a></li>
                                <li><a href="index.php?con=15">Vilkor</a></li>
                                 <li><a href="index.php?con=16">Nyheter</a></li>

                             <li><a href="index.php?con=4">KONTAKTA OSS</a></li>



                        </ul>
     <div class="clear"></div>
    </div>

    </body>
    </html>

Curently it reamains active on home page even changing to other page. How could i able to make it active of that page on every page changing.

Thanks in advance.

Upvotes: 0

Views: 89

Answers (3)

Tammy
Tammy

Reputation: 1132

This jQuery work too for me.

<script>
 var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

</script>

Upvotes: 0

Navin Bhandari
Navin Bhandari

Reputation: 192

u can change index of <li> in .eq() according to page (starts from 0) the active class will aply to that index <li>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".nav").children("li").eq(2).addClass("active");
});
</script>
</head>
    <body>
      <div class="container">    
                        <ul class="nav navbar-nav ct-navbar--fadeIn">
                            <li>
                                <a href="index.php?con=1">HEM</a>

                            </li>
                            <li><a href="index.php?con=3">OM OSS</a></li>
                                <li><a href="index.php?con=15">Vilkor</a></li>
                                 <li><a href="index.php?con=16">Nyheter</a></li>

                             <li><a href="index.php?con=4">KONTAKTA OSS</a></li>        

                        </ul>
     <div class="clear"></div>
    </div>    
    </body>
    </html>

Upvotes: 1

shubham715
shubham715

Reputation: 3302

try this

<?php
$myactiveli = $_GET['con'];
 ?>
<html>
    <body>
      <div class="container">

                        <ul class="nav navbar-nav ct-navbar--fadeIn">
                            <li <?php if($myactiveli==1) { echo 'class="active"'; } ?> >
                                <a href="index.php?con=1">HEM</a>

                            </li>
                            <li <?php if($myactiveli==3) { echo 'class="active"'; } ?>><a href="index.php?con=3">OM OSS</a></li>

                        </ul>
     <div class="clear"></div>
    </div>

    </body>
    </html>

Upvotes: 1

Related Questions