使用Jquery即時更改CSS類

Question

好的，所以我是Javascript和jqyery noob，所以需要幫助。

我有一個CSS菜單欄，它用作整個網站的元素。 可以示出一個單獨的按鈕通過向的元件分配一個類作為點擊pressed 。 我的第一個鏈接顯示為按下。 我可以在視圖中輕松訪問URL，這樣我就知道自己在哪里，但是我希望能夠根據URL的位置在頁面加載時即時更改類，因此菜單將顯示為該區域選擇的內容。 我在下面的菜單中添加了兩個元素。 我想根據變量中的值將'class'=> 'pressed'更改為'class'=> '' 。 我該怎么做？

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

以下是兩種方法的兩種預期的html輸出：

    <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

我認為您可以完全通過CSS來實現。

使所有<a>標記都具有此類.changeIfActive

您的HTML看起來像

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

將此類添加到您的CSS

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

現在，當用戶查看目標頁面時，CSS將使用其偽類功能進行CSS類更改

有關更多信息，請參閱http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 2

Dz1已回答

按照您剛才所說的，使用“ removeClass”刪除要刪除的那個，然后使用“ addClass”添加將改變背景的那個。 -

Answer 3

嘗試這個：

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