Nap*_*oli 2 html javascript css onclick
我试图用onclick()事件更改某些标签的类.基本前提是当用户点击它们时,每个标签的背景图像都会发生变化,从而刺激"菜单选择".
这是我的代码:
<style type="text/css">
.navCSS0
{
background-image:url('news_selected.png');
width:222px;
height:38px;
}
.navCSS1
{
width:222px;
height:38px;
}
.container_news
{
background-image:url('itsupdates.png');
height:330px;
width:965px;
}
.container_left
{
margin-top:90px;
margin-left:20px;
float:left;
height:auto;
width:auto;
}
</style>
</header>
<script>
//global arrays to store nav positions, menu options, and the info text
var navid_array = new Array();
navid_array[0] = 'nav1';
navid_array[1] = 'nav2';
navid_array[2] = 'nav3';
navid_array[3] = 'nav4';
navid_array[4] = 'nav5';
//Takes the navid selected, and goes into a loop where the background of the selected menu item is changed to a image
//with rounded corners, while the backgrounds of the other menu items are changed back to light grey or stay the same.
//There is also a call to the change_info() function when the selected menu item has been located.
function nav_color_swap(navid)
{
for(var i = 0; i < navid_array.length; i++) {
if(navid == navid_array[i])
{
document.getElementById(navid).className = "navCSS0";
}
else
{
document.getElementById(navid).className = "navCSS1";
}
}
}
</script>
<body>
<div class="container_news">
<div class="container_left">
<div class="navCSS1" id="nav1" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 1</a></div>
<div class="navCSS1" id="nav2" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 2</a></div>
<div class="navCSS0" id="nav3" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 3</a></div>
<div class="navCSS1" id="nav4" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 4</a></div>
<div class="navCSS1" id="nav5" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 5</a></div>
</div>
</div>
</body>
</html>
问题是,当我运行此代码时,没有任何反应......唯一真正改变的是最后一个菜单项("Blah 5")...任何想法？
<header>不是元素,而是<head>.<html>是<head>和的唯一合法子女<body>.示例代码有一个子<script>元素<html>nav_color_swap设置navid的类名,而不是navid_array[i]when navid != navid_array[i].这可能是您问题的根源.<a>将为所有元素的类名称设置为"navCSS1",因为<a>它没有ID属性.由于每次点击最多需要更改两个元素类,我建议跟踪当前元素而不是循环遍历所有元素:
<style type="text/css">
.selected {
background-image:url('news_selected.png');
}
.news, .news li {
padding: 0;
margin: 0;
list-style-type: none;
}
...
</style>
<script type="text/javascript">
function createNavSelector(curr_nav, selectedClass, unselectedClass) {
return function (nav) {
curr_nav.className = unselectedClass;
curr_nav = nav;
curr_nav.className = selectedClass;
}
};
</script>
</head>
<body>
...
<div class="container_news">
<ul class="news">
<li id="nav1" onclick="nav_select(this)">Blah 1</li>
<li id="nav2" onclick="nav_select(this)">Blah 2</li>
<li id="nav3" class="selected" onclick="nav_select(this)">Blah 3</li>
<li id="nav4" onclick="nav_select(this)">Blah 4</li>
<li id="nav5" onclick="nav_select(this)">Blah 5</li>
</ul>
</div>
<script type="text/javascript">
var nav_select = createNavSelector(document.getElementById('nav3'), 'selected', '');
由于#nav*看起来是新闻项目列表或导航项目列表,我转而使用元素,因为它们携带的语义信息比<div>s更多.在这一点上,div-vs-ol/ul在很大程度上取决于个人偏好.
我还重命名了函数和元素类来反映它们的目的,而不是它们如何实现这个目的.这样,您可以在不需要更改名称的情况下更改其行为.
您是否使用它<a>来支持旧版本的IE？我不担心比IE 6更旧的东西.
根据No Refund,No Return的评论,这里有一些链接可以帮助您开始使用Firebug调试JS .Safari也有一个很好的调试器,如果这是您选择的浏览器.
| 归档时间： |
|
| 查看次数： |
9160 次 |
| 最近记录： |