ホームページ  >  記事  >  バックエンド開発  >  オプションボックスの色

オプションボックスの色

WBOY
WBOYオリジナル
2016-06-23 13:22:211110ブラウズ


デフォルトでは、[すべて] の背景色は、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 スタイル セレクターを使用する方が便利です


しかし、以前の CSS を削除する方法がわかりません

例を示しましょう

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。