效果图:
代码实现思路:
头部导航栏用 <ul> 和 <li> 实现,在每个 li 内部包含上下排列的 <a> 和 <ul> ,正常状态下该ul会隐藏,而当鼠标放在a上方时,ul就会显示。
原生JS实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用style修改样式 -->
<style>
* {
margin: 0;
padding: 0;
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
a {
color: black;
text-decoration: none;
}
ul {
list-style: none;
}
.tab_header {
border-bottom: gray 1px yellow;
width: 480px;
}
.tab_title {
float: left;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
}
.tab_title a {
display: block;
height: 100%;
width: 100%;
}
.tab_list {
display: none;
}
.tab_list li {
border: yellow 1px solid;
border-top: none;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<ul class="tab_header clearfix">
<li class="tab_title">
<a href="#">微博</a>
<ul class="tab_list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li class="tab_title">
<a href="#">微博</a>
<ul class="tab_list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li class="tab_title">
<a href="#">微博</a>
<ul class="tab_list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li class="tab_title">
<a href="#">微博</a>
<ul class="tab_list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
var titles = document.querySelectorAll('.tab_title');
var lists = document.querySelectorAll('.tab_list');
//循环给每个tab_title添加事件
for (var i = 0; i < titles.length; i++) {
titles[i].onmouseover = function () {
for (var j = 0; j < titles.length; j++) {
titles[j].className = 'tab_title';
}
for (var j = 0; j < lists.length; j++) {
lists[j].style.display = 'none';
}
this.children[1].style.display = 'block';
this.className = 'tab_title yellow';
}
titles[i].onmouseout = function () {
for (var j = 0; j < titles.length; j++) {
titles[j].className = 'tab_title';
lists[j].style.display = 'none';
}
}
}
</script>
</body>
</html>
jQuery实现代码(需要引入JQ文件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用style修改样式 -->
<style>
* {
margin: 0;
padding: 0;
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
a {
color: black;
text-decoration: none;
}
ul {
list-style: none;
}
.tab_header {
border-bottom: gray 1px yellow;
width: 480px;
}
.tab_title {
float: left;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
}
.tab_title a {
display: block;
height: 100%;
width: 100%;
}
.tab_list {
display: none;
}
.tab_list li {
border: yellow 1px solid;
border-top: none;
}
.yellow {
background-color: yellow;
}
</style>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<ul class="tab_header clearfix">
<li class="tab_title">
<a href="#">微博</a>
<ul class="tab_list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li class="tab_title">
<a href="#">微博</a>
<ul class="tab_list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li class="tab_title">
<a href="#">微博</a>
<ul class="tab_list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li class="tab_title">
<a href="#">微博</a>
<ul class="tab_list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
$(function () {
//hover(fn1,fn2) fn1是鼠标经过触发的函数,fn2是鼠标离开触发的函数
//stop是为了防止出现动画队列的情况,当触发下一个动画时,停止上一个动画的显示,而且stop必须写在下一个动画前面
$('.tab_title').hover(function () {
$('.tab_title>a').removeClass('yellow');
$(this).children('a').addClass('yellow');
$(this).children('ul').stop().slideDown();
}, function () {
$(this).children('ul').stop().slideUp();
$('.tab_title>a').removeClass('yellow');
});
})
</script>
</body>
</html>