Heim > Artikel > Web-Frontend > 这个用css可以实现吗？还是必须用js，如下图，当选中某个选项会有背景色，没选中的就没有，应该很简单的。_html/css_WEB-ITnose
这个用css可以实现吗？还是必须用js，如下图，当选中某个选项会有背景色，没选中的就没有，应该很简单的。_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:211154Durchsuche
例如选中个人资料，个人资料背景色变成橙色，选中修改密码时背景色变成橙色，个人资料背景色消失。
上代码
<!-- 下拉菜单 --><div id="firstpane" class="menu_list"> <h3 class="menu_head current">我的发布</h3> <div style="display:block" class="menu_body"> <a href="#">全部信息</a> <a href="#">显示中的信息</a> <a href="#">审核中的信息</a> <a href="#">已删除的信息</a> </div> <h3 class="menu_head">卖家交易</h3> <div style="display:none" class="menu_body"> <a href="#">我的订单</a> <a href="#">退款管理</a> </div> <h3 class="menu_head">管理账户</h3> <div style="display:none" class="menu_body"> <a href="javascript:void(0);" onmousedown="showConent('ziliao.html')">个人资料</a> <a href="javascript:void(0);" onmousedown="showConent('ziliao.html')">修改密码</a> </div></div>
回复讨论(解决方案)
你的需求选中如果代表的是点击的话，那么是必须用到js的，因为css没有判断是不是点击的部分，但如果是鼠标移动到选项代表选中的话，那么倒是可以用css来实现更换背影颜色，在css中有个:hover的伪类写法，表示鼠标移动过就触发
最近心情不好，，，别问我为什么。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>statistics test</title> <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <script>$(document).ready(function(){ $("h3").on("click",function(){ $("h3").css("background","#fff"); $(this).css("background","red"); });});</script><style>.menu_head{width:200px;height:80px;border:1px solid #000;}</style></head> <body> <div id="firstpane" class="menu_list"> <h3 class="menu_head current">我的发布</h3> <div style="display:block" class="menu_body"> <a href="#">全部信息</a> <a href="#">显示中的信息</a> <a href="#">审核中的信息</a> <a href="#">已删除的信息</a> </div> <h3 class="menu_head">卖家交易</h3> <div style="display:none" class="menu_body"> <a href="#">我的订单</a> <a href="#">退款管理</a> </div> <h3 class="menu_head">管理账户</h3> <div style="display:none" class="menu_body"> <a href="javascript:void(0);" onmousedown="showConent('ziliao.html')">个人资料</a> <a href="javascript:void(0);" onmousedown="showConent('ziliao.html')">修改密码</a> </div></div></body> </html>
你的需求选中如果代表的是点击的话，那么是必须用到js的，因为css没有判断是不是点击的部分，但如果是鼠标移动到选项代表选中的话，那么倒是可以用css来实现更换背影颜色，在css中有个:hover的伪类写法，表示鼠标移动过就触发
移动触发我知道，我要点击触发，JS该怎么写点击触发用JS获取其ID，之后给下背景颜色，很简单的说
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3绘制灰太狼动画，绝对精彩_html/css_WEB-ITnoseNächster Artikel：html decode 方法_html/css_WEB-ITnose