更改a<；部门>；使用JavaScript初始化_Javascript_Css_Html_Onclick

更改a<；部门>；使用JavaScript初始化

javascript css html

更改a<；部门>；使用JavaScript初始化,javascript,css,html,onclick,Javascript,Css,Html,Onclick,我试图用onclick（）事件更改某些标记的类。基本前提是当用户点击标签时，每个标签的背景图像都会发生变化，这有点刺激了“菜单选择” 以下是我的代码： <style type="text/css"> .navCSS0 { background-image:url('news_selected.png'); width:222px; height:38px; } .navCSS1 { width:222px; height:38px; }

我试图用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>


.navCSS0
{
背景图片：url（'news_selected.png'）；
宽度：222px；
高度：38px；
}
.NAVCS1
{
宽度：222px；
高度：38px；
}
·货柜新闻
{
背景图片：url（'itsupdates.png'）；
高度：330px；
宽度：965px；
}
.集装箱左
{
边缘顶部：90像素；
左边距：20px；
浮动：左；
高度：自动；
宽度：自动；
}
//用于存储导航位置、菜单选项和信息文本的全局数组
var navid_array=新数组（）；
navid_数组[0]=“nav1”；
navid_数组[1]=“nav2”；
navid_数组[2]=“nav3”；
navid_数组[3]=“nav4”；
navid_数组[4]=“nav5”；
//获取选定的navid，并进入循环，其中选定菜单项的背景将更改为图像
//使用圆角，而其他菜单项的背景将变回浅灰色或保持不变。
//找到所选菜单项后，还会调用change_info（）函数。
功能导航颜色交换（navid）
{
对于（var i=0；i


问题是，当我运行这段代码时，什么都没有发生。。。唯一真正改变的是最后一个菜单项（“blah5”）。。。有什么想法吗？
看起来问题在于：
您的锚定标记（链接）被一个div包围（在本例中，div本身不会比其内部的链接占用更多的空间）。当用户单击该链接时，它将运行该链接的onclick（并传递该链接的id，该id未添加为属性）
此外，您需要将脚本标记移动到标题中（顺便说一下，它是“标题”，而不是“标题”）

标题
标记现在确实存在，但这就是您放置页面标题的地方，就像导航一样。对于标题和元标记，请使用head
标记
的唯一合法子女是
和
。示例代码有一个
元素，它是
当navid！=navid_阵列[i]
。这很可能是你问题的根源
修复后，单击的处理程序

根据“不退款，不退货”的评论，这里有一些链接可以让您开始使用调试JS。Safari还有一个很好的调试器，如果这是您选择的浏览器的话



（视频）
您的代码有几点：
您的“头部”标签应该是
，而不是
您的
标记应该位于
元素内，最好使用以下命令指定语言：

在一个函数中调用代码，该函数在主体的onload事件中被触发，以确保javascript引用的元素实际上已经在页面上初始化
您可以通过多种方式优化代码。。一个快速的解决方案是纠正代码中的逻辑问题
将两处的“navid”替换为navid\u数组[i]
document.getElementById（navid_数组[i]）.className
我真的建议您研究jquery并开始使用它，它将使一切变得更加简单。请给我一些免费调试。我更改了if和else子句来执行此操作：document.getElementByID（navid_array[I]）。className=等等。。。它起作用了！非常感谢。@NRNR：我知道，我不应该只给那不勒斯鱼。我主要是说原始代码有什么问题，因为我打算提供更高效、更可扩展的替代方案。不，不需要包括已弃用超过10年的“语言”属性。你的意思是不再需要在每次打开脚本标记时键入这22个字符？这需要一些香槟。如果navid==navid\u数组[i]
那么在getElementById
调用中用navid\u数组[i]
替换navid
有什么好处？如果你想提出建议，那么请发表评论，答案应该提供问题的解决方案。请仔细查看for循环navid
对于整个函数是通用的，而navid\u数组[i]
对于循环的每次迭代都会发生变化。在该逻辑中发生的是：第一次迭代，如果cond为true并更改了navid的类名；第二次迭代，cond将失败，并再次更改navid的类名。这就是为什么类名更改只影响最后一次迭代中的最后一个菜单项。也就是说，@Napoli代码只能影响作为最后一次迭代出现的最后一个菜单。明白：）也试试我的建议，然后告诉我这是不是一个解决方案。很抱歉
    if(navid == navid_array[i]) 
        {
            document.getElementById(navid_array[i]).className = "navCSS0";
        }
     else 
        {
            document.getElementById(navid_array[i]).className = "navCSS1";
        }