使用Jquery即时更改CSS类

Question

Ok, so I'm a Javascript and jqyery noob, so looking for help.

I have a CSS menu bar that is used as an element across my site. an individual button can be shown as clicked by assigning a class to the element of pressed . The first link that I have is showing as pressed. I can access the URL easily in my view so I know where I am, but I want to be able to change the class on the fly as the page loads depending on where the url is, so the menu will show selected for that area. I've included two elements of my menu below. I want to change 'class'=> 'pressed' to 'class'=> '' depending on the value in a variable. How would I do this?

    <ul id="menuBar" class="topmenu">
    <input type="checkbox" id="css3menu-switcher" class="switchbox">
    <label onclick="" class="switch" for="css3menu-switcher"></label>
    <li class="topfirst">
        <?php
        echo $this->Html->link(
            $this->Html->image('icons/group.png', array('width' => '20', 'line-height' => '20'))
            . ' ' . __('Organisations'),
            array('controller' => 'organisations', 'action' => 'index'),
            array('escape' => false, 'class'=> 'pressed'));
        ?>
        <ul>
            <li> <?php
                echo $this->Html->link(
                    $this->Html->image('icons/group_add.png', array('width' => '20', 'line-height' => '20'))
                    . ' ' . __('New Organisation'),
                    array('controller' => 'organisations', 'action' => 'add'),
                    array('escape' => false));
                ?></li>
        </ul>
    </li>
    <li class="topmenu">
        <?php
        echo $this->Html->link(
            $this->Html->image('icons/telephone.png', array('width' => '20', 'line-height' => '20'))
            . ' ' . __('Contacts'),
            array('controller' => 'contacts', 'action' => 'index'),
            array('escape' => false));
        ?>
        <ul>
            <li>  <?php
                echo $this->Html->link(
                    $this->Html->image('icons/telephone_add.png', array('width' => '20', 'line-height' => '20'))
                    . ' ' . __('New contact'),
                    array('controller' => 'contacts', 'action' => 'add'),
                    array('escape' => false, 'class'=> 'unpressed'));
                ?>
        </ul>
    </li>
</ul>

Below are the two expected html outputs for either way:

    <li class="topmenu">
<a href="/dev/oak/trunk/contacts">
<img width="20" alt="" line-height="20" src="/dev/oak/trunk/img/icons/telephone.png">
Contacts
</a></li>


    <li class="topmenu">
<a class='pressed' href="/dev/oak/trunk/contacts">
<img width="20" alt="" line-height="20" src="/dev/oak/trunk/img/icons/telephone.png">
Contacts
</a></li>

Answer 1

I think you can achieve this purely by CSS.

Make all your < a > tags have this class .changeIfActive

Your HTML will look something like

<a href="your/link/here" class="changeIfActive"> Some text </a>

add to your CSS this class

a.changeIfActive{color:white; background:black;}
a.changeIfActive:active{color:black; background:white;}

Now when user is viewing the target page the CSS will do the CSS class changing using its Psudo-class feature

More information please refer to http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 2

Dz1 Answered

From what you just said, use "removeClass" to remove the one you want to remove, then "addClass" to add the one that will change the background. –

Answer 3

Try this:

$("li.topmenu > a").click(function(){
 $("li.topmenu > a").removeClass('pressed');
 $(this).addClass('pressed');
});