关于纯js导航条文字变色源码的信息
本文目录一览：
- 1、怎么使用js实现导航点击变颜色，再点击下一个，上一个恢复原来的颜色？
- 2、网页制作导航条随鼠标变色，代码是什么？要用javascript么？
- 3、用JS实现导航栏栏目点击后，被点击后的栏目字体颜色作改变
- 4、js 用轮播的图片改变导航栏的颜色，新手求代码
怎么使用js实现导航点击变颜色，再点击下一个，上一个恢复原来的颜色？
哥们，你这代码存在诸多问题。帮你修改了一下。如下，你先拿去用。我最后再点评，有什么问题存在。
!DOCTYPE HTML
html
head
meta charset="GBK"
style
.dh{
width: 100px;
height: 30px;
background: brown;
list-style-type: none;
float: left;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.dh:hover{
cursor: pointer;
color: white;
background: burlywood;
}
/style
script type="text/javascript"
window.onload = function() {
var dh = document.getElementById('nv_bar');
var menulist=document.getElementsByClassName("dh");
//console.info( menulist );
//使用委托机制。绑定父元素。不要绑定子元素。根据冒泡原理，点击子元素，默认会触发父元素点击事件。
dh.onclick = function(e) {
if(e.target.className=="dh"){
//1 先记录颜色
var color;
if(e.target.style.background = 'brown') {
color = 'burlywood';
}else {
color = 'brown';
}
//2 统一还原
for(var i=0;imenulist.length;i++)menulist[i].style.background="brown";
//3 单独设置点击的那个
e.target.style.background=color;
}
}
}
/script
/head
body
ul id="nv_bar"
li class="d68e-b0d2-bd74-44df dh" 导航一/li
li class="b0d2-bd74-44df-7b2a dh"导航2/li
li class="bd74-44df-7b2a-f727 dh" 导航3/li
li class="44df-7b2a-f727-eebc dh" 导航4/li
li class="7b2a-f727-eebc-897d dh" 导航5/li
/ul
/body
/html
问题：
1 id不能有多个。否则document.getElementById获取出来的只是第一个。
2 不要根据颜色判断。你自定义标识。比如 state=0或1 或者active=true|false
通过setAttribute(key,value);存到li身上。
3 对于这种多元素点击事件。不要把时间绑定在子元素身上。最好绑定在父元素身上。委托机制。
4 网页结构要重视。不要太随意，虽然浏览器也可以解析。
5 编码最好要指定。
多的不说了，可以自己看一下w3c文档。或者javascript高级编程。
网页制作导航条随鼠标变色，代码是什么？要用javascript么？
比如你的导航条是红色的
那你设置CSS样式
a:hover{ background:#666;}
那么你鼠标触发事件时 链接成灰白色 反正样式这样设置，颜色随你自己而定。
用JS实现导航栏栏目点击后，被点击后的栏目字体颜色作改变
var menu = document.getElementById('menu');
var links = menu.getElementsByTagName('a');
for (var i = 0; i links.length; i++) {
links[i].onclick = function () {
for (var j = 0; j links.length; j++) {
if(links[j] == this) {
this.style.color = 'red';
} else {
links[j].style.color = '';
}
}
}
}
点击链接之后会刷新页面。改了颜色换了页之后也不会有效果啊。
js 用轮播的图片改变导航栏的颜色，新手求代码
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style
span{
width: 40px;height: 5px;background: aqua;display: block;float: left;margin-left: 15px;margin-top: 300px;
}
/style
/head
body
div
!--由于没有图片资源，所以就用alt 中的文字改变代替图片了 --
img src="1.jpg" alt="第一张图片" width="480" height="280" class="f727-eebc-897d-5513 image"
span/span
span/span
span/span
/div
script
function $(id){
var temp = id.substr(1,id.length);
switch (id.charAt(0)) {
case "#":
return document.getElementById(temp);
case ".":
return document.getElementsByClassName(temp);
default:
return document.getElementsByTagName(id);
}
}
var array = ["第一张图片","第二张图片","第三张图片"];
var len = array.length;
var i = 0;
var img = $(".image")[0];
var span = $("span");
setInterval(function(){
if(ilen-1){
i++;
}else{
i = 0;
}
img.src=array[i];
img.alt=array[i];
for(var j=0;jspan.length;j++){
span[j].style.background = "aqua";
}
span[i].style.background = "red";
},1000)
/script
/body
/html
