使用Jquery动态更改CSS类
使用Jquery动态更改CSS类
提问于 2014-11-21 13:06:20
好的，所以我是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>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-11-21 13:57:22
Dz1回答
从您刚才说的，使用"removeClass“删除您想要删除的，然后使用"addClass”添加将更改背景的一个。-
Stack Overflow用户
发布于 2014-11-21 13:40:42
我认为你完全可以通过CSS来实现这一点。
使所有标记都具有这个类.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类的更改。
更多信息请参阅classes.asp
Stack Overflow用户
发布于 2014-11-21 14:00:55
试试这个：
$("li.topmenu > a").click(function(){
$("li.topmenu > a").removeClass('pressed');
$(this).addClass('pressed');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27062140
复制相关文章
相似问题
腾讯云开发者
