您的位置:首页 > Web前端 > JQuery

jquery手风琴

2019-09-10 22:29 183 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/Steve_Richard/article/details/100715203

jquery实现tab切换

$(function () {
$('.nav li').each(function (x) {
$(this).addClass('active').siblings().removeClass();
$('.content div').eq(x).show().siblings().hide()
})
})

jquery手风琴

<!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>
* {padding: 0;margin: 0;}
.box {width: 900px;height: 300px;}
.box1,.box2,.box3,.box4 {float: left;position: relative;}
.a,.b,.c,.d {position: absolute;top: 0;left: 0;width: 100px;height: 300px;}
.bg {background-color: #000;opacity: 0.3;}
p {width: 20px;height: 300px;display: inline-block;color: #fff;position: absolute;top: 0;left: 15px;opacity: 1;}
.two {left: 53px;}
img {width: 100px;height: 300px;}
.show {width: 600px;}
</style>
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="box">
<div class="box1">
<div class="a w bg">
<p>作者:默默的墨墨</p>
<p class="two">我的个人拉萨之旅故事之城</p>
</div>
<img src="images/u=1081344387,1785290410&fm=26&gp=0.jpg" alt="" class="show">
</div>
<div class="box2">
<div class="b w">
<p>作者:默默的墨墨</p>
<p class="two">我的个人拉萨之旅故事之城</p>
</div>
<img src="images/u=1348707900,559674524&fm=26&gp=0.jpg" alt="">
</div>
<div class="box3">
<div class="c w">
<p>作者:默默的墨墨</p>
<p class="two">我的个人拉萨之旅故事之城</p>
</div>
<img src="images/u=1407589226,1345601442&fm=26&gp=0.jpg" alt="">
</div>
<div class="box4">
<div class="d w">
<p>作者:默默的墨墨</p>
<p class="two">我的个人拉萨之旅故事之城</p>
</div>
<img src="images/u=1686059205,404217172&fm=26&gp=0.jpg" alt="">
</div>
</div>
<script>
$(function(){
$('.w').each(function(x){
$(this).click(function(){

$('.box').find('img').each(function(){
$(this).removeClass()
})
$(this).parent().parent().find('img').eq(x).toggleClass('show')

$('.box').find('.w').each(function(){
$(this).removeClass('bg')
})
$(this).toggleClass('bg')

})
})
})
</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: