案例一
鼠标移动到文字上显示对应图片
效果如下:(到不同数字的位置显示不同颜色的色块)
代码如下:
(css)
<style>
.wrap{width: 705px;height: 510px;overflow: hidden;}/*隐藏多余的li*/
.dv{width: 300px;height: 505px}
#left li{width: 50px;height: 100px;list-style:none;border: 1px solid}
#center li{list-style:none;}
#right li{width: 50px;height: 100px;list-style:none;border: 1px solid}
#left,#right{width:100px;}
#left,#right,#center{height:500px;float: left;}/*让ul横向排列*/
</style>
(div布局,适当省略一点,用到自行补充)
<div class="wrap">
<ul id="left">
<li>000</li>
<li>111</li>
...
</ul>
<ul id="center">
<li><div class="dv" style="background-color: #0d3349;"></div></li>
<li><div class="dv" style="background-color: #3f96e6;"></div></li>
...
</ul>
<ul id="right">
<li>555</li>
<li>666</li>
...
</ul>
</div>
(jq)
方法一
.index()方法:获取当前的li的索引值
.siblings(“li”):li的兄弟元素
$(function () {
//获取左侧的列表中的li注册鼠标进入的事件
$("#left>li").mouseover(function () {
//获取当前的li的索引值.index()方法
var index=$(this).index();
$("#center>li:eq("+index+")").siblings("li").hide();
$("#center>li:eq("+index+")").show();
});
//获取右侧的列表中的li注册鼠标进入的事件
$("#right>li").mouseover(function () {
var index=$(this).index()+5;//******重点是这里,你可以事先控制台打印一下li索引值,看一下右侧需要加几才可以正确排序
$("#center>li:eq("+index+")").siblings("li").hide();// $("#center>li").hide();也可以运行
$("#center>li:eq("+index+")").show();
});
});
案例二
突出高亮显示图片
效果图如下:
(css)
<style>
.wrap ul{width: 310px;height: 205px;}
.dv{width: 100px;height: 100px;}
li{float: left;list-style: none;}
</style>
(div布局)
<div class="wrap">
<ul>
<li><div class="dv" style="background-color: #34d87f;"></div></li>
...
</ul>
</div>
(jq) opacity透明度设置;find(“li”)查找li元素
<script>
$(function(){
$(".wrap li").mouseover(function () {
$(this).css("opacity",1).siblings("li").css("opacity",0.5);
})
$(".wrap li").mouseout(function () {
$(this).find("li").css("opacity",1);
})
})
</script>
案例三
垂直导航
效果图如下
(css)
#uu li {margin-bottom: 10px;background-color: #beffc1;cursor: pointer;}//鼠标变手
#uu li ul {list-style: none;margin: 0;padding: 0;}//遇到二级目录跑偏的情况,都设置成0就好了
#uu li ul li {background-color: pink;}
#uu ul {margin:0; padding:0; text-align:center;}
#uu{list-style: none;padding: 0;margin: 0}
(div)
<div style=" width:180px; height:500px; border:1px solid red;">
<ul id="uu">
<li>111
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>222
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
</ul>
</div>
</body>
(jq)
方法一,点击一个另一个下拉框缩回去
$(function () {
//找到id为u1的下面的li里面的ul里面的li全部隐藏
$("#u1>li>ul>li").hide();
//找到id为ul的直接的子元素li,注册鼠标点击的事件
$("#u1>li").click(function () {
$(this).siblings("li").children("ul").find("li").hide(500);
//当前的li中的ul中的所有的li显示
$(this).children("ul").find("li").show(500);
});
});
方法二,根据单数偶数点击次数,让两个可以自由伸缩(但是如果另一个打开,再打开一个需要点两次.如果有一个东西需要点击两次的,可以使用这个方法)
$(function () {
var cont=0
$("#uu>li>ul>li").hide();
$("#uu>li").click(function () {
cont++
if(cont % 2 ==0){
$(this).children("ul").find("li").hide();
}else{
//$(this).siblings("li").children("ul").find("li").hide(500);
$(this).children("ul").find("li").show();
}
});
});
方法三(重点来啦!这个可以两个随便点)
next() 方法返回被选元素的后一个同级元素
slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态
parent() 方法返回被选元素的直接父元素
slideUp()通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。
扫描二维码关注公众号,回复:
10570427 查看本文章
$(function () {
$(".main>a").click(function(){
$(this).next().slideToggle(500).parent().siblings().find(".child").slideUp(500);
});
});
<ul class="content">
<li class="main"><a href="#">菜单 1</a>
<ul class="child">
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3</li>
</ul>
</li>
...
</ul>
如果觉得上面的比较难理解,可以直接根据方法一的div布局写jq.重点就在于改变可视状态==.slideToggle()==
$(function () {
$("#uu>li>ul>li").hide();
$("#uu>li").click(function () {$(this).children("ul").find("li").slideToggle();
});
});
案例四
手风琴
效果如图
(css)
* {margin: 0;padding: 0;}
.dv{width: 300px;height: 200px;}
.wrap{width: 500px;height: 200px;border: 1px solid red;overflow: hidden;margin: 50px auto;}
li{width:100px;float: left;}//注意要给里设置平均的初始宽度
ul {list-style: none;}
(div)
<div class="wrap">
<ul>
<li><div class="dv" style="background-color: #34d87f;"></div></li>
<li><div class="dv" style="background-color: #911cff;"></div></li>
...
</ul>
</div>
(jq)
$(function () {
$(".wrap>ul>li").mouseover(function () {
$(this).siblings("li").css("width","50px");
$(this).css("width","300px")
});
$(".wrap>ul>li").mouseout(function () {
$(this).parent().find("li").css("width","100px");
});
});
案例五
tab键切换标签内容
效果如下图:
(css)
* {margin:0;padding:0;}
ul {list-style:none;}
.wrapper {width:1000px;height:475px;margin:0 auto;margin-top:100px;}
.tab {border:1px solid #ddd;border-bottom:0;height:36px;width:320px;}
.tab li {position:relative;float:left;width:80px;height:34px;line-height:34px;text-align:center;cursor:pointer;border-top:4px solid #fff;}
.products {width:1002px;border:1px solid #ddd;height:476px;}
.products .main {float:left;display:none;}
.products .main.selected {display:block;}
.tab li.active {border-color:red;border-bottom:0;}
.dv {width:100px;height:100px}
(div)
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">绿色</li>
<li class="tab-item">紫色</li>
<li class="tab-item">黄色</li>
<li class="tab-item">粉色</li>
</ul>
<div class="products">
<div class="main selected"><div class="dv" style="background-color: #34d87f;"></div></div>
<div class="main"><div class="dv" style="background-color: #d255d8;"></div></div>
<div class="main"><div class="dv" style="background-color: #FFFD48;"></div></div>
<div class="main"><div class="dv" style="background-color: #FF9F99;"></div></div>
</div>
</div>
(jq)
.removeClass(“类名”)从被选元素移除一个或多个类;
.addClass(“类名”)向被选元素添加一个或多个类名
<script>
$(function () {
$(".tab>li").mouseover(function () {
//移除当前的li的所有兄弟元素li的类样式
$(this).siblings("li").removeClass("active");
//让当前li添加类样式
$(this).addClass("active");
//获取当前的li的索引
var index=$(this).index();
//获取div中对应的索引的这个div,让这个div的所有的兄弟元素div全部移除selected类样式,让当前对应的div(索引对应)应用selected类样式
$(".products>div:eq("+index+")").siblings("div").removeClass("selected");
//当前对应的div添加类样式
$(".products>div:eq("+index+")").addClass("selected");
});
});
</script>