Question

我正在尝试使用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”）......任何想法？

Answer 1

<header>不是元素，但<head>是。
<html>的唯一合法子女是<head>和<body>。示例代码的<script>元素是<html>
nav_color_swap在navid_array[i]时设置navid的类名，而不是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>更多。在这一点上，div-vs-ol / ul在很大程度上取决于个人偏好。

我还重命名了函数和元素类来反映它们的目的，而不是它们如何实现这个目的。这样，您可以在不需要更改名称的情况下更改其行为。

您是否使用<a>来支持旧版本的IE？我不会担心IE 6之前的任何事情。

根据No Refund，No Return的评论，这里有一些链接可以帮助您开始使用Firebug调试JS。 Safari也有一个很好的调试器，如果这是你选择的浏览器。

Answer 2

看起来问题是：

您的锚标记（链接）被div包围（在这种情况下，div本身不会占用比其中的链接更多的空间）。当用户点击链接时，它会运行链接的onclick（并传递链接的id，而不是作为属性添加）。

此外，您需要将脚本标记移动到标题中（顺便说一下，它的“头部”，而不是“标题”）

Answer 3

您的代码的一些内容：

您的“标题”标记应为<head> </head>，而不是<header> </header>
您的<script>标记应位于<head>元素中，最佳做法是使用以下语言指定语言：<script language="JavaScript" type="text/javascript"> ... </script>
在正文的onload事件中触发的函数中调用代码，以确保javascript引用的元素实际上已在页面上初始化

Answer 4

您可以通过多种方式优化代码。快速解决方案将纠正代码中的逻辑问题

替换＆＃39; navid＆＃39;在 navid_array [i]

的两个地方

document.getElementById（ navid_array [i] ）。className

    if(navid == navid_array[i]) 
        {
            document.getElementById(navid_array[i]).className = "navCSS0";
        }
     else 
        {
            document.getElementById(navid_array[i]).className = "navCSS1";
        }

使用JavaScript </div>更改<div>类

4 个答案: