一些经典案例
案例一：（实现效果，鼠标移动到哪个菜单上，哪个菜单会显示二级菜单，移开会收回。）
案例二：tab栏（选项卡）
鼠标滑过，显示对应的特殊样式，下面的内容替换为需要的内容。
和无缝滚动一样是专有名词。
eq用下标取数据，index是获取下标。
两行代码有相同的部分，那么可以考虑使用链式编程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
background:gold;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 按钮鼠标移入: 这个按钮高亮（添加类active），下面要显示对应的内容（添加类current）
$('input').mouseover(function(){
// $(this).addClass('active')
// $(this).siblings().removeClass()
$(this).addClass('active').siblings().removeClass()
// 显示内容 三个div -- 获取到鼠标移入的菜单的下标，用这个下标在三个内容div中选出和这个下标相等的div显示即可
var num = $(this).index()
// alert(num)
// $('.tab_cons div').eq(num).addClass('current')
// // 已经显示的div的兄弟标签隐藏
// $('.tab_cons div').eq(num).siblings().removeClass()
$('.tab_cons div').eq(num).addClass('current').siblings().removeClass()
})
})
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
</html>案例三：层级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级菜单</title>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
}
body,ul{
margin:0px;
padding:0px;
}
ul{list-style:none;}
.menu{
width:200px;
margin:20px auto 0;
}
.menu .level1,.menu li ul a{
display:block;
width:200px;
height:30px;
line-height:30px;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
}
.menu .level1{
border-bottom:1px solid #afc6f6;
}
.menu li ul a{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef;
}
.menu li ul li{
border-bottom:1px solid #afc6f6;
}
.menu li ul{
display:none;
}
.menu li ul.current{
display:block;
}
.menu li ul li a:hover{
background-color:#f6b544;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 单击一级菜单，滑动显示对应的二级菜单 -- 小ul
$('.level1').click(function(){
// $(this).next().slideDown();
// $(this).parent().siblings().children('ul').slideUp()
$(this).next().slideDown().parent().siblings().children('ul').slideUp()
})
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">手机</a>
<ul class="current">
<li><a href="#">iPhone X 256G</a></li>
<li><a href="#">红米4A 全网通</a></li>
<li><a href="#">HUAWEI Mate10</a></li>
<li><a href="#">vivo X20A 4GB</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">笔记本</a>
<ul>
<li><a href="#">MacBook Pro</a></li>
<li><a href="#">ThinkPad</a></li>
<li><a href="#">外星人(Alienware)</a></li>
<li><a href="#">惠普(HP)薄锐ENVY</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">电视</a>
<ul>
<li><a href="#">海信(hisense)</a></li>
<li><a href="#">长虹(CHANGHONG)</a></li>
<li><a href="#">TCL彩电L65E5800A</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">鞋子</a>
<ul>
<li><a href="#">新百伦</a></li>
<li><a href="#">adidas</a></li>
<li><a href="#">特步</a></li>
<li><a href="#">安踏</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">玩具</a>
<ul>
<li><a href="#">乐高</a></li>
<li><a href="#">费雪</a></li>
<li><a href="#">铭塔</a></li>
<li><a href="#">贝恩斯</a></li>
</ul>
</li>
</ul>
</body>
</html>
案例四：获得和失去焦点
此案例是老版本的实现方法，现在html5.0会使用placeholder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('input').focus(function(){
// 如果是默认值的时候才清空
if($(this).val() == '请输入用户名' ){
$(this).val('')
}
})
$('input').blur(function(){
// 如果用户没有输入的时候 -- 输入的值为空 -- val为空
if($(this).val() == ''){
$(this).val('请输入用户名')
}
})
})
</script>
</head>
<body>
<input type="text" value="请输入用户名">
</body>
</html>
案例五：父级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.left,.right{
position: fixed;
top: 250px;
}
.left{
left: 0;
}
.right{
right: 0;
}
.left span,.right span{
width: 20px;
height: 20px;
background: #ccc;
font-size: 14px;
color: #333;
position: absolute;
right: 0;
top: 0;
text-align: center;
cursor: pointer;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 左侧的span单击，隐藏left
// $('.left span').click(function(){
// $('.left').hide(500)
// })
// $('.right span').click(function(){
// $('.right').hide(500)
// })
// 单击span，隐藏这个span 的父级
$('span').click(function(){
$(this).parent().hide(500)
})
})
</script>
</head>
<body>
<div class="left"><img src="images/left.jpg" alt=""><span>X</span></div>
<div class="right"><img src="images/right.jpg" alt=""><span>X</span></div>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读