一、多Tab切换
效果图:点击上面的套餐选择,下面显示对应的套餐内容
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多tab切换</title>
<style>
* {
margin: 0;
padding: 0;
}
#tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
}
#container {
position: relative;
}
#content1, #content2, #content3 {
width: 300px;
height: 100px;
padding: 30px;
position: absolute;
top: 40px;
left: 0;
}
#tab1, #content1 {
background-color: #ffcc00;
}
#tab2, #content2 {
background-color: #ff00cc;
}
#tab3, #content3 {
background-color: #00ccff;
}
</style>
</head>
<body>
<h2>多Tab点击切换</h2>
<ul id="tab">
<li id="tab1" value="1">10元套餐</li>
<li id="tab2" value="2">30元套餐</li>
<li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
<div id="content1">
10元套餐详情:<br/> 每月套餐内拨打100分钟,超出部分2毛/分钟
</div>
<div id="content2" style="display: none">
30元套餐详情:<br/> 每月套餐内拨打300分钟,超出部分1.5毛/分钟
</div>
<div id="content3" style="display: none">
50元包月详情:<br/> 每月无限量随心打
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
//方法一 更简单
var $contents = $('#container>div')
var $lis = $("#tab>li")
// 给3个li加监听
$lis.click(function () { // 隐式遍历
// 隐隐藏所有内容div
// $contents.css('display', 'none')
$contents.hide()
// 显示对应的内容div
// 得到当前点击的li在兄弟中下标
var index = $(this).index()
// 找到对应的内容div, 并显示
$contents[index].style.display = 'block'
// $($contents[index]).css('display', 'block')
})
//方法二
var $contents = $("#container div");
var divIndex = 0;//当前显示的内容div的下标
$("#tab>li").click(function () {
// 隐藏当前已经显示的内容div
$contents[divIndex].style.display = "none";
// 得到当前点击的li在兄弟中下标
var liIndex = $(this).index();
// 找到对应的内容div, 并显示
$contents[liIndex].style.display = "block";
//更新下标
divIndex = liIndex;
})
})
</script>
</body>
</html>
二、下拉菜单
效果图:鼠标移动到一级菜单,显示对应菜单下的二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(images/bg.jpg);
}
.wrap li {
background-image: url(images/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$(".wrap>ul>li>a")
.mouseenter(function () {
$(this).next().show();
})
.mouseleave(function () {
$(this).next().hide();
})
})
</script>
</body>
</html>
三、导航栏动态显示
效果图:鼠标移动到菜单栏,滑出显示对应的子菜单内容 并且可以停留在子菜单上
案例:注意jQuery中stop()的用法,运行之后立刻结束当前页上的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏动态显示效果</title>
<style rel="stylesheet">
* {
margin: 0;
padding: 0;
word-wrap: break-word;
word-break: break-all;
}
body {
background: #FFF;
color: #333;
font: 12px/1.6em Helvetica, Arial, sans-serif;
}
a {
color: #0287CA;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, li {
list-style: none;
}
img {
border: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}
html {
overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
}
#navigation {
width: 784px;
padding: 8px;
margin: 8px auto;
background: #3B5998;
height: 18px;
}
#navigation ul li {
float: left;
margin-right: 14px;
position: relative;
z-index: 100;
}
#navigation ul li a {
display: block;
padding: 0 8px;
background: #EEEEEE;
font-weight: 700;
}
#navigation ul li a:hover {
background: none;
color: #fff;
}
#navigation ul li ul {
background-color: #88C366;
position: absolute;
width: 80px;
overflow: hidden;
display: none;
}
#navigation ul li ul li {
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">衬 衫</a>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li><a href="#">卫 衣</a>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li>
<a href="#">裤 子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$("#navigation>ul>li:has(ul)").hover(function () {
$(this).children("ul").stop(true).slideDown();
},function () {
$(this).children("ul").stop(true).slideUp();
})
})
</script>
</body>
</html>