-1

ナビゲーションを作成しました。ユーザーがクリックして関連するボタンの CSS を取得する各カテゴリが必要です。

ここにフィドルのリンクがあります: http://jsfiddle.net/xn2hk/14/

CSS

#nav {
    width: 960px;
    height: 35px;
    margin: 0 auto;
    border: 1px solid #fefcea;
    background: #4c4c4c;
}
#nav ul {
    width: 100%;
    margin: 0 auto;
}
#nav li {
    display: inline;
    text-decoration: none;
    color: #eee;
    line-height: 35px;
    padding-left: 80px;
    padding-right: 80px;
}
#main {
    width: 500px;
    height:500px;
    margin: 0 auto;
    background-color: black;
}

HTML

<div id="nav">
    <ul>
        <li>Day</li>
        <li>Night</li>
        <li>Nature 1</li>
        <li>Nature 2</li>
    </ul>
</div>
<div id="main"></div>
4

2 に答える 2

1

このようなものを使用してください。これは、現在クリックされているものにのみ影響します

$('#nav ul li').click(function(){
     $('li').removeClass('bc');
    $(this).addClass('bc');
});

ここで働くフィドル

于 2013-11-12T11:12:47.273 に答える
0

最初に "jquery 1.10.1" のような js を追加し、さらに html で li の下に 1 つの属性を追加する必要があります。

ここにhtmlコードがあります：

  <div id="nav">
            <ul>
                <li data-color="red">Day</li>
                <li data-color="gray">Night</li>
                <li data-color="yellow">Nature 1</li>
                <li data-color="blue">Nature 2</li>

            </ul>        
        </div>
    <div id="main"></div>

ここにjsコードがあります：

$('#nav li').click(function(){
   var color = $(this).attr('data-color');
    $(this).css( "background-color", color );
});
于 2013-11-12T11:31:45.090 に答える