ホームページ >バックエンド開発 >PHPチュートリアル >オプションボックスの色
デフォルトでは、[すべて] の背景色は、background-color: #e35964 です。他の選択をクリックすると、前のオプションの背景色が削除されます (最初は [すべて])、
現在の選択に背景色を追加します。背景色: # e35964
クリックは onclick="getCategory()" でトリガーされます
現在のオプションの背景を変更するには、これらの div に ID を追加し、getCategory() に渡す必要がありますか?
これを実行すると、前のオプションのスタイルを削除する方法がわかりません
<div class="banner01"> <ul> <li> <div style="cursor:pointer;background-color: #e35964" class="d1" onclick="getCategory('All',1)">All</div> </li> <{section name=s loop=$getListCategory}> <{if ($smarty.section.s.index)%6==0 && $smarty.section.s.index!=0}> <li style="margin-left:110px;"> <div style="cursor:pointer;" class="d2" onclick="getCategory('<{$getListCategory[s].title_en}>',1)"><{$getListCategory[s].title_en}></div> </li> <{else}> <li> <div style="cursor:pointer" class="d2" onclick="getCategory('<{$getListCategory[s].title_en}>',1)"><{$getListCategory[s].title_en}></div> </li> <{/if}> <{/section}> </ul> </div>
<script> function getCategory(category,page){ ................... //改变选项颜色 .................. }</script>
投稿を更新
は同様のことが行われています 関数
dc6dce4a544fdca2df29d5ac0ea9906b を使用して選択範囲をラップします
onclike 関数で
オプションの内容を再読み込みし、パフォーマンスが低い元の div.html() の内容を置き換えます
より便利ですjq スタイル セレクターを使用するには
jq スタイル セレクターを使用する方が便利です
例を示しましょう
c9ccee2e6ea535a969eb3f532ad9fe89 .show {cursor; :pointer;background-color: #e35964;} /& Lt;/style & gt;
& & lt; li & gt; div class = "d1 Show d3" onclight = "getcategory ('all' , 1)" & gt; すべて & lt;/div & gt; /& Lt;/li & gt;
25edfb22a4f469ecb59f1190150159c6
b6e5191c9282e3ea6b03134e84d87e7a
bed06894275b65c1ab86501b08a632eb
3f1c4e4b6b16bbbd69b2ee476dc4f83a
function getCategory(id)
{
$(".d3").each(function()
{
$(this).removeClass("show");
})
$("#div"+id) .addclass("show")
}
2cacc6d41bbb37262a98f745aa00fbf0