导航栏样式HTML,[JavaScript实例]导航栏⼏种常见样式
这⾥记录下导航栏⼏种常见的样式，仅供⼤家参考。
导航栏1 (原⽣ JS 代码)
⽐较常见也⽐较简单的导航栏 ，⽤的 JavaScript 原⽣代码，⼤致思路是通过改变 li 元素的 className 实现⿏标移动切换 tab 时改变其背景⾊及⽂字颜⾊，同时切换显⽰ tab 对应内容。
nav-1.gif
导航栏1-JS原⽣版
* {
margin: 0;
padding: 0;
}
body {
font: 12px/2 "Courier New";
}
#header {
width: 550px;
height: 200px;
margin: 20px auto;
border: 1px solid #e1e1e1;
}
#nav {
list-style-type: none;
}
#nav li {
width: 110px;
height: 35px;
background: #fff;
float: left;
color: #000;
text-align: center;
line-height: 35px;
cursor: pointer;
border-bottom: 1px solid #e1e1e1;
font-weight: bold;
}
#nav li.active {
background: #11ac63;
color: #fff;
}
#content {
padding: 50px 30px;
}
#content ul {
display: none;
}
#content .list {
display: block;
}
var aLi = ElementById("nav").getElementsByTagName("li");
var oUl = ElementById("content").getElementsByTagName("ul"); var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for (var x in aLi) {
aLi[x].className = "";
oUl[x].className = "";
}
this.className = "active";
oUl[this.index].className = "list";
};
aLi[i].onmouseout = function() {
this.className = "";
aLi[this.index].className = "active";
};
}
};
华为
苹果
⼩⽶
三星
⼀加js导航栏下拉菜单
华为 Mate20
华为 P20
华为荣耀 10
iPhone XS
iPhone XS MAX
iPhone 8
⼩⽶ 8
⼩⽶ 8 SE
⼩⽶ Play
三星 Note 9
三星 S9 +
三星 A8s
⼀加⼿机 6
⼀加⼿机 6T
⼀加⼿机 5T
导航栏1(jQuery 代码)
还是第⼀种导航栏样式，通过 jQuery 实现，思路不变。
导航栏2
* {
margin: 0;
padding: 0;
}
body {
font: 12px/2 "Courier New";
}
#header {
width: 550px;
height: 200px;
margin: 20px auto;
border: 1px solid #e1e1e1;
}
#nav {
list-style-type: none;
}
#nav li {
width: 110px;
height: 35px;
background: #fff;
float: left;
color: #000;
text-align: center;
line-height: 35px;
cursor: pointer;
border-bottom: 1px solid #e1e1e1; font-weight: bold;
transition: 0.5s;
}
#nav li.active {
background: #fff;
color: #11ac63;
}
#content {
padding: 50px 30px;
}
#content ul {
display: none;
}
#content .list {
display: block;
}
$(function() {
$("#nav li").each(function(index) { $(this).mouseover(function() {
$("#nav .active").removeClass("active"); $("#content .list").removeClass("list");
$(this).addClass("active");
$("#content ul:eq(" + index + ")").addClass("list");
});
});
});
华为
苹果
⼩⽶
三星
⼀加
华为 Mate20
华为 P20
华为荣耀 10
iPhone XS
iPhone XS MAX
iPhone 8
⼩⽶ 8
⼩⽶ 8 SE
⼩⽶ Play
三星 Note 9
三星 S9 +
三星 A8s
⼀加⼿机 6
⼀加⼿机 6T
⼀加⼿机 5T
导航栏2
使⽤ jQuery 代码，思路与第⼀种⼀样，通过改变 li 元素的 className 实现，只是不改变 tab 的背景⾊⽽只改变字体颜⾊，也是⽐较常见的导航栏样式之⼀。为了更好的显⽰效果，顺便给切换标签时字体颜⾊的改变加了渐变效果。
nav-2.gif
导航栏2
* {
margin: 0;
padding: 0;
}
body {
font: 12px/2 "Courier New";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。