0

ナビゲーションバー付きのhtmlページがあります。理想的には、ユーザーが1つのオプションを選択すると、そのオプションの背景画像が変更されます。ただし、javascriptを使用してリストプロパティを動的に変更することで、それを実現することはできませんでした。

html：

<html>
<head>
<link href="includes/css/content.css" rel="stylesheet" type="text/css">
<script>
function select(id)
{
    alert(id);
    var list = document.getElementsByTagName('li');
    for(var i=0;i<list.length;i++)
    {
        list[i].class='random';
    }
    document.getElementById(id).class='selected';
}
</script>
</head>
<body>
<div id="mainContent">
            <div class = 'nav'>
                <ul>
                    <li class='selected' id='home' onClick="select(this.id)"><a href="#" ><span  style='color:gray'>Home</span></a></li>
                    <li id='system' onClick="select(this.id)"><a href="#" ><span  style='color:gray'>Systems</span></a></li>
                    <li id='temp' onClick="select(this.id)" ><a href="#"><span  style='color:gray'>Notification Template</span></a></li>

                </ul>
        </div>
</body>
</html>

そして、cssファイルは次のようになります。

.nav .selected a{
background-size:cover;
background: url(../images/nav.gif) no-repeat top;
color:white;
}

ここで私が間違っていることはありますか？

4

2 に答える 2

2

HTMLElementのプロパティclassは存在しません。classNamecssクラスを設定するために使用します。

プロパティの完全なリストについては、http：//www.w3schools.com/jsref/dom_obj_all.aspを参照してください。

于 2012-11-28T18:04:21.180 に答える
1

.classNameそのようにクラスを設定する場合は、 [ https://developer.mozilla.org/en-US/docs/DOM/element.className ]を使用することをお勧めします。

于 2012-11-28T18:04:13.853 に答える