Question

好的，所以我是一个Javascript和jqyery noob，所以寻求帮助。

我有一个CSS菜单栏，用作我网站的元素。通过将类分配给pressed元素，可以显示单个按钮。我的第一个链接显示为按下。我可以在我的视图中轻松访问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实现这一目标。

让你所有的＆lt; a＆gt;标签有这个类.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将使用其Psudo级功能进行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');
});

使用Jquery动态更改CSS类

3 个答案: