功能交替显示

wyr123789

浏览: 38041 次
性别:

最近访客更多访客>>

oooot04

jianli021

a1002323289

遥远的想念

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端
css
前端，js，jquery

html jquery 交替显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/v3.0/css/style-lh.css"/>
<link rel="stylesheet" type="text/css" href="../css/v3.0/css/public-lh.css"/>
</head>
<style >
body{margin: 0; padding: 0;position: relative;}
.title {overflow: auto;border-bottom: 1px solid #f5f5f5; display: block;}
.title li{font-size: 2.5rem;text-align: center;padding: 1rem 0;}
.active { font-size: 2rem; color: #f66456; border-bottom: 3px solid red ;}
.a{font-size: 2.5rem;display: inline-block;}
}
</style>
</style>
<body>

<div class="title ">
<ul class="HBox BoxCenter">
<li class="Bflex1">自由</li>
<li class="Bflex1">字符</li>
<li class="Bflex1">数字</li>
</ul>
</div>
<div class="arrayl">
<a class="a"><em class="hasem">生命</em><i>诚可贵</i></a>
<a class="a"><em class="hasem">爱情</em><i>价更高</i></a>
<a class="a"><em class="hasem">若为自由去</em><i>两者皆可抛</i></a>
</div>
<div class="arrayl" style="display: none;">
<a class="a"><em class="hasem">恋人心</em><i>信誓旦旦留给谁</i></a>
<a class="a"><em class="hasem">走着走着就散了</em><i>有些人走着走着就说散了，有些人想着想着就忘了</i></a>
<a class="a"><em class="hasem">背包</em><i>你的背包背到现在还没烂</i></a>
</div>
<div class="arrayl" style="display: none;">
<a class="a"><em class="hasem">1234567</em><i>11223344556677</i></a>
<a class="a"><em class="hasem">1234567</em><i>11625473546</i></a>
<a class="a"><em class="hasem">1234567</em><i>11546735414</i></a>
</div>
</body>
<script type="text/javascript" src="../js/v3.0/js/jquery-1.7.2.min.js" ></script>
<script>
//.append(i);在元素值后面追加
//queryarryl.find("a");返回queryarryl下所有子元素为a的；
//on()添加事件；
//index(this);返回当前元素的下标
//queryi.eq(index).removeClass("active").hide();根据index返回的下标删除class样式并隐藏
$(function(){
var queryarryl = $(".arrayl");
var querya = queryarryl.find("a");
var queryem = querya.find("em");
var queryi = querya.find("i");
queryi.hide().removeClass("active");
queryem.on('click',function(){
var index = queryem.index(this);
if(queryi.eq(index).hasClass("active")) {
queryi.removeClass("active").hide();
}else{
queryi.removeClass("active").hide();
queryi.eq(index).addClass("active").show();
}
});
var querytitle=$(".title");
var titleli = querytitle.find("li")
titleli.on('click',function(){
var index = titleli.index(this);
queryarryl.hide();
titleli.removeClass("active").eq(index).addClass("active");
queryarryl.eq(index).show();
});
});

</script>
</html>

分享到：

功能两级联动菜单 | 纯CSS+CSS3右上角倾斜四十五度封页角效果

2016-08-24 16:09
浏览 588
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论