CODEWITHSUNDEEP
phphtmlcssclassstyles
GVillani82
GVillani82

Reputation: 17429

Trouble with active element in my html page

I'm looking for a method to use CSS to change the display properties to the nav element related to the page that is currently active.

For example, if the user is on the Home page, the 'Home' button in the navigation is styled differently.

I use the following code:

<li class="active">
    <a href="<?php echo $sito ?>/index.php">Home</a>
</li>
<li>
    <a href="<?php echo $sito ?>/page1.html">page1</a>
</li>
<li>
   <a href="<?php echo $sito ?>/page2.html">page2</a>
</li>

when I selecte page1 or page2, the home button remain active!

Upvotes: 0

Views: 75

Answers (3)

werd
werd

Reputation: 646

As I understand - You have a static pages. If so - just add class="active" for corresponding <li> in page1.html and page2.html

In page1.html it will be 2nd <li> element but in page2.html - last one

Upvotes: 0

Praveen kalal
Praveen kalal

Reputation: 2129

<li <?php if($page=='home'){?> class="active"<?php }?>>
    <a href="<?php echo $sito ?>/index.php">Home</a>
</li>
<li <?php if($page=='page1'){?> class="active"<?php }?>>
    <a href="<?php echo $sito ?>/page1.html">page1</a>
</li>
<li <?php if($page=='page2'){?> class="active"<?php }?>>
   <a href="<?php echo $sito ?>/page2.html">page2</a>
</li>

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

Use this

var $links = $('li');
$links.click(function(){
   $links.removeClass('active');
   $(this).addClass('active');
});

DEMO

Upvotes: 1

Related Questions