ホームページ >ウェブフロントエンド >htmlチュートリアル >これはCSSを使用して実現できますか?以下に示すように、引き続き js を使用する必要があります。オプションが選択されている場合は背景色が表示され、選択されていない場合は背景色が表示されません。 _html/css_WEB-ITnose
これはCSSを使用して実現できますか?以下に示すように、引き続き js を使用する必要があります。オプションが選択されている場合は背景色が表示され、選択されていない場合は背景色が表示されません。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:42:211205ブラウズ
例えば、個人情報を選択すると、個人情報の背景色がオレンジ色になり、パスワード変更を選択すると、背景色がオレンジ色になり、個人情報の背景色が消えます。
コードをアップします
<!-- 下拉菜单 --><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>
ディスカッションに返信 (解決策)
要件の選択がクリックを表す場合、CSS はそれがクリック部分であるかどうかを判断しないため、js を使用する必要がありますが、マウスがオプションに移動して選択を示すと、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>
必要な選択がクリックを表す場合、CSS はそれがクリックであるかどうかを判断しないため、js を使用する必要がありますが、マウスが選択を表すオプションに移動する場合は、CSS を使用して変更できます背面の色、CSS に :hover という疑似クラスの記述メソッドがあり、クリックしてトリガーすることを意味します。
クリックする方法は?トリガーして JS を使用して ID を取得し、背景色を指定するのは非常に簡単です声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。