`

功能 交替显示

阅读更多
<!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>
分享到:
评论

相关推荐

    带数字flash图片交替显示

    【标题】:“带数字flash图片交替显示” 在IT领域,我们常常遇到需要动态展示信息的情况,比如在网页或应用程序中让图片交替显示以增加视觉效果。这个“带数字flash图片交替显示”的主题就涉及到这样的技术应用。...

    首页图片交替显示代码

    在网页设计中,首页图片交替显示是一种常见的视觉效果,它能吸引用户注意力并提升网站的交互体验。这种技术通常应用于轮播图、幻灯片展示或者焦点图等元素,使得多张图片能够在首页以动态的方式循环播放。下面我们将...

    flash图片交替显示

    标题“Flash图片交替显示”指的是使用Flash技术实现的图片轮播功能,这种功能常见于网站设计中,用于展示多张图片或广告。Flash作为一种交互式矢量图形和多媒体平台,曾广泛应用于网页动画和交互设计,它允许开发者...

    底部菜单导航交替显示

    本教程将详细讲解如何实现“底部菜单导航交替显示”的功能,即点击按钮后,菜单导航可以横向滑动隐藏,再次点击则横向滑动显示。 一、设计原则与用户体验 1. 清晰性:底部导航栏应包含清晰的图标和文字标签,让...

    图片交替显示

    在网页设计中,图片交替显示是一种常见的动态效果,用于创建滑动展示、轮播图或幻灯片等组件。这种效果通常由JavaScript实现,因为HTML和CSS本身并不支持自动定时切换图片的功能。在这个主题中,我们将深入探讨如何...

    交替图片显示

    在页面中交替显示最新图文图片,并加上链接功能

    网页图片交替显示

    ### 网页图片交替显示实现方法解析 #### 一、引言 在网页设计与开发过程中,为了增强用户体验及视觉效果,常常需要实现图片的动态显示功能,比如轮播图、广告图滚动等。本文将详细介绍一种通过HTML与JavaScript结合...

    javascript写的一个简单的图片交替显示

    在网页设计中,为了吸引用户的注意力或展示多张图片,开发者常常会使用图片交替显示的功能。这种功能通过定时切换显示的图片,营造出一种动态的效果。常见的应用场景包括产品展示、新闻滚动、广告轮播等。 实现图片...

    LabVIEW中的波形和数据交替显示控制教程

    LabVIEW中的波形和数据交替显示控制教程 本文将介绍 LabVIEW 中的波形和数据交替显示控制教程,旨在帮助读者了解如何在虚拟仪器设计中实现波形和数据的交替显示控制。通过本文,读者将学习到 LabVIEW 中的选择结构...

    JS_模仿Flash交替图片显示

    通过分析和实践这些步骤,开发者可以掌握如何使用JavaScript来模仿Flash的图片交替显示功能,为网站增加动态和交互性。在实际项目中,还可以考虑使用现成的JavaScript库,如Swiper、Slick或Bootstrap Carousel等,...

    MCGS触摸屏通过脚本程序实现某一个变量0、1交替循环显示

    MCGS触摸屏通过脚本程序实现某一个变量0、1交替循环显示,主要使用的是脚本程序,自动实现变量的交替显示

    基于DS12887的万年历

    - **显示功能交替显示**:在显示时间的同时,还需要周期性地显示日期和星期信息。 - **带闹铃和闹铃设置功能**:用户可以设置特定的时间作为闹钟提醒。 2. **发挥部分要求** - **特定控制功能**:根据设定的时间...

    单片机C语言实例--132-双色点阵双色交替动态显示.zip

    2. "双色点阵双色交替动态显示.c":这是核心的C源代码文件,包含了实现点阵双色交替显示的算法和逻辑。 3. "双色点阵双色交替动态显示.Opt":可能为编译优化信息或输出文件。 4. "双色点阵双色交替动态显示.plg":...

    基于JQuery的js排序与表格颜色交替显示

    总结来说,通过结合使用jQuery和JavaScript的原生功能,我们可以轻松实现数据排序和表格颜色交替显示。同时,对于动态加载或分页的数据,借助如jQuery DataTables这样的插件,这些功能的实现更加智能化和便捷。了解...

    51单片机教程实例131-双色点阵交替图形显示

    本教程实例“51单片机教程实例131-双色点阵交替图形显示”着重讲解如何利用51单片机控制双色点阵LED显示屏,实现交替图形的动态显示效果。这一知识点涵盖了单片机编程、硬件接口设计以及LED显示技术等多个方面的内容...

    基于c#的广告图片交替显示小型项目

    【标题】"基于C#的广告图片交替显示小型项目"是一个使用C#编程语言实现的Web应用程序,旨在创建一个能够自动切换展示多张广告图片的功能。这种技术在网站设计中非常常见,通常用于吸引用户的注意力并提高用户体验。...

    单片机实例131-双色点阵交替图形显示.rar

    3. **帧缓冲区**:为了实现图形的交替显示,单片机通常需要在内存中维护一个或两个帧缓冲区,用于存储即将显示的图像数据。当一个缓冲区的数据被传输到显示模块后,另一个缓冲区可以被更新,然后切换显示。 4. **...

    改进版2051-DS1302-遥控时钟,温度时间星期交替显示

    这款时钟能够实现温度、时间和星期的交替显示功能,并且具有较高的精度。系统的显示模式为:每10秒钟显示一次时间,随后显示3秒钟的日期,接着再显示10秒钟的时间,最后是3秒钟的星期和温度信息。 #### 二、关键...

    matlab开发-2rgb图像的交替检查板显示

    接着,将重组后的图像数据传递给`imshow`函数,设置适当的参数,如colormap(色彩映射)和alpha通道,以达到交替显示的效果。如果需要增强对比度或者调整亮度,还可以利用`imadjust`函数。 在实际应用中,可能还...

    单片机C语言实例-双色点阵交替图形显示.zip

    然后,我们需要在中断服务函数中切换显示数据,确保点阵屏交替显示两个不同的图形。 此外,对于双色点阵,我们还需要处理两种颜色的切换。这可能涉及到额外的硬件控制,例如使用两个独立的LED驱动电路或者通过软件...

Global site tag (gtag.js) - Google Analytics