功能交替显示

最新推荐文章于 2023-01-03 20:05:13 发布

iteye_2837

最新推荐文章于 2023-01-03 20:05:13 发布

阅读量238

点赞数

分类专栏：前端 css 前端，js，jquery 文章标签： html jquery 交替显示 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_2837/article/details/82672281

版权

前端同时被 3 个专栏收录

15 篇文章

订阅专栏

css

6 篇文章

订阅专栏

前端，js，jquery

5 篇文章

订阅专栏

<!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>

功能 交替显示

功能交替显示