0

こんにちは、いくつかのリスト要素を含む順序付けられていないリストがあり、選択されたリスト要素を強調表示するための css スタイルを設定したいのですが、これを試していますが、スタイルには影響しません

function SelectThis(ctrl) {
    var list = document.getElementById("myslidemenu").getElementsByTagName('li');

    for (i = 0; i < list.length; i++) {
        list[i].style.color = "blue";
    }

    ctrl.style.color = 'white';
}

私のhtmlは次のようになります

<div id="myslidemenu" class="jqueryslidemenu">
    <ul>
        <li onclick="SelectThis(this);"><a href="Dashboard.aspx">Dashboard</a>
        </li>
        <li onclick="SelectThis(this);"><a href="Geofence.aspx">Geofence</a>
        </li>
        <li onclick="SelectThis(this);"><a href="Personnel.aspx">Personnel</a>
        </li>
    </ul>
    <br style="clear: left" />
</div>

この div タグは別の div タグ内にあります。どうにかして内側の div タグをオーバーライドして、Ul で選択された li を変更することはできません

そして私のcssはこのようなものです

.jqueryslidemenu ul li a:hover{
 background: black; /*tab link background during hover state*/
  color: Yellow;
  }

.jqueryslidemenu{
font: bold 12px Arial;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
height: 1%;
}
4

3 に答える 3

2

<a>の代わりに要素のスタイルを変更する必要があり<li>ます。のスタイル<li>は更新されてい<a>ますが、JS でオーバーライドする必要がある独自のスタイルがあります。

于 2013-06-25T07:02:55.423 に答える
0

代わりに背景を変更しようとしていますか? そのように？

テストでアンカーを削除したため、404 エラーが発生しません。

function SelectThis(ctrl) {                         
    var list = document.getElementById("myslidemenu").getElementsByTagName('li');

    for (i = 0; i < list.length; i++) {
        list[i].style.background = 'blue';
    }

    ctrl.style.background = 'white';
}
于 2013-06-25T07:04:27.733 に答える