js学习之导航切换（js做导航）

导航切换设计到CSS中标签属性设置：隐藏、显示

涉及html5异步传输的特性

更需要知道js多标签时候元素选择的写法

再啰嗦一下：classLIst属性返回元素的类名，可以用方法add()、remove()添加class属性

setAttribute(name,value)设置新属性及其值，或者修改已有属性的值

正文

上导航切换的示意图

js代码：

window.onload = function () { //window.onload:就是等整个页面内容全部加载完毕

//填写js逻辑

//获取ul里li的个数

var tab_ui = document.getElementsByTagName("ul");

var tab_li= tab_ui[0].getElementsByTagName("li")

//获取要显示的div的个数

var content = document.getElementById("content");

var content_div = content.getElementsByTagName("div");

//给li添加鼠标点击事件

for(var i= 0;i<tab_li.length;i++){

tab_li[i].index = i; //异步传输，不设置的话，得到的都是i的最大值

tab_li[i].onclick = function () {

//清除之前的样式

for(var j=0;j<tab_li.length;j++){

//没有点击事件，j=0,1,2

tab_li[j].classList.remove("active");

content_div[j].setAttribute("class","hidden");

}

//设置自己本身的样式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 无效，i=3导致

//将对应的内容显示出来

content_div[this.index].classList.remove("hidden");

}

//给li添加鼠标点击事件

var tab_ui = document.getElementsByTagName("ul");

var tab_li1= tab_ui[1].getElementsByTagName("li")

//var tab_li1= document.getElementsById("li")

var content1 = document.getElementById("content1");

var content1_div = content1.getElementsByTagName("div");

for(var i= 0;i<tab_li1.length;i++){

tab_li1[i].index = i; //重点，为了让i在循环体内

tab_li1[i].onmouseover = function () {

//这里的i永远=3，如果不设置 tab_li[i].index = i

//清除之前的样式

for(var j=0;j<tab_li1.length;j++){

//没有点击事件，j=0,1,2

tab_li1[j].classList.remove("active");

content1_div[j].setAttribute("class","hidden");

}

//设置自己本身的样式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 无效，i=3导致

//将对应的内容显示出来

content1_div[this.index].classList.remove("hidden");

}

</script>

css代码

<style>

.hidden{

display: none;

}

.tabdemo>.active{

background: red;

border-bottom-color:white ;

}

#wrap{

height: 58px;

background-color: #c7eafa;

}

.tabdemo {

width: 100%;

list-style: none;

margin: 0 auto;

background-color: blue;

}

.tabdemo1 {

width: auto;

list-style: none;

margin: 0 auto;

background-color: pink;

float:left;

}

li{

color: rgb(0, 0, 0);

display:inline-block;

}

ul.tabdemo1 li {

color: rgb(224, 9, 9);

display:block;

}

li:hover{

background-color: lavender;

}

一定注意要把a转成行内块元素，

如果转的是块元素那么短竖线会掉下去，

因为块级元素是独占一行的

display:inline-block;

padding: 0 20px;

line-height: 58px;

text-decoration: none;

color: black;

}

</style>

html代码

<!DOCTYPE html>

<html>

<head>

<title>多导航切换</title>

</head>

//js代码、css代码放在这里

<body>

<div>

</ul>

</div>

</div>

</div>

</div>

<div>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

网站首页 > 技术文章正文

猜你喜欢

网站首页 > 技术文章 正文

js学习之导航切换（js做导航）

猜你喜欢

网站首页 > 技术文章正文