Home > Article > Web Front-end > Can this be achieved using css? You still have to use js, as shown below. When an option is selected, there will be a background color, and if it is not selected, there will be no background color. It should be very simple. _html/css_WEB-ITnose
Can this be achieved using css? You still have to use js, as shown below. When an option is selected, there will be a background color, and if it is not selected, there will be no background color. It should be very simple. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:211159browse
For example, when personal data is selected, the background color of the personal data turns orange. When modifying the password is selected, the background color turns orange and the background color of the personal data disappears.
Code on
<!-- 下拉菜单 --><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>
Reply to discussion (solution)
If your needs are selected, the representative If it is clicked, then js must be used, because css does not determine whether it is the clicked part, but if the mouse moves to the option to indicate selection, then css can be used to change the background color. There is a The pseudo-class writing method of :hover means that
is triggered when the mouse is moved. I have been in a bad mood recently,,, don’t ask me why. . .
<!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>
If your requirement selection represents a click, then js must be used, because css does not determine whether it is a clicked part, but if the mouse moves to If the option representative is selected, you can use css to change the background color. There is a pseudo-class writing method of :hover in css, which means that the mouse will be triggered when the mouse moves
Move trigger I know, I want to click to trigger, how can I use JS Writeclick to trigger and use JS to get its ID, and then give the background color, it is very simple to say