使用 jQuery 单击链接时更改链接背景颜色
Change link background colour when link clicked using jQuery
我有一个基本的jQuery手风琴。如果单击链接,我想更改该链接的背景颜色。
因此,如果我单击"下拉列表 1",背景颜色将变为红色。我该怎么做?
演示:http://jsfiddle.net/4dm318nn/
$(document).ready(function($) {
$('.inline').find('.navtoggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".sub-menu").not($(this).next()).slideUp('fast');
});
});
.accordion-toggle {cursor: pointer;}
.sub-menu {display: none;}
.sub-menu .sub-menu {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav class="medium-8 columns primary menu">
<ul class="inline naked">
<li class="primary-item"><a href="http://localhost:8888/test/wordpress">Home</a></li>
<li id="menu-item-74" class="primary-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74"><a href="#" class="navtoggle">Dropdown 1</a>
<ul class="sub-menu">
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a href="http://localhost:8888/test/wordpress/?page_id=45">Dropdown 2</a>
<ul class="sub-menu">
<li id="menu-item-77" class="sub-sub-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost:8888/test/wordpress/?page_id=47">Test 1</a></li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost:8888/test/wordpress/?page_id=49">Test 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
单击时添加红色
.CSS
.accordion-toggle {cursor: pointer;}
.sub-menu {display: none;}
.sub-menu .sub-menu {display: block;}
.HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<nav class="medium-8 columns primary menu">
<ul class="inline naked">
<li class="primary-item"><a href="http://localhost:8888/test/wordpress">Home</a></li>
<li id="menu-item-74" class="primary-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74"><a href="#" class="navtoggle">Dropdown 1</a>
<ul class="sub-menu">
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a href="http://localhost:8888/test/wordpress/?page_id=45">Dropdown 2</a>
<ul class="sub-menu">
<li id="menu-item-77" class="sub-sub-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost:8888/test/wordpress/?page_id=47">Test 1</a></li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost:8888/test/wordpress/?page_id=49">Test 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
爪哇语
$(document).ready(function($) {
$('.inline').find('.navtoggle').click(function(){
//Expand or collapse this panel
$(this).css('background-color','red').next().slideToggle('fast');
//Hide the other panels
$(".sub-menu").not($(this).next()).slideUp('fast');
});
});
不确定这是你想要的,但是
$(".inline.naked li").click(function(color){
var bgColor = typeof x === "undefined" ? "red" : color;
$(this).css("background-color", color);
});
你想要什么?
相关文章:
- 悬停在链接上时不断更改背景图像
- 使用 jQuery 单击链接时更改链接背景颜色
- 文本的实时预览使链接在悬停时不会更改背景颜色
- 使用链接的类更改背景
- 具有另一个背景图像的图像上的链接不起作用
- 如何使用链接更改背景图像
- 悬停链接时添加背景图像
- 在 html 中使用链接的 css 更改背景和前景
- 将鼠标悬停在同一列表中的其他链接时移动水平背景线
- 在创建的Joomla模块中链接背景CSS图像
- 在链接悬停时更改背景图像
- 在javascript中生成第n个子链接的随机背景颜色
- 如何在 Angular js 中更改活动链接的背景颜色
- 高亮显示背景窗格大于链接对象且没有填充的链接
- Jquery更改导航链接鼠标悬停的背景颜色
- 主页链接'的背景颜色在Internet explorer中发生了变化,但在Mozilla Firefox中不起作
- 如何更改所选链接的背景
- 活动链接背景
- 需要禁用节的超链接背景
- 激活时更改页面内定位链接背景图像