基于jQuery实现多标签页切换的效果(web前端开发)


Posted in Javascript onJuly 24, 2016

这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页

方法一:

首先,我们要把页面的大体框架和样式写出来,html和css代码如下:

<ul id="tab">
<li id="tab1" onclick="show(1)">10元套餐</li>
<li id="tab2" onclick="show(2)">30元套餐</li>
<li id="tab3" onclick="show(3)">50元包月</li>
</ul>
<div id="container">
<div id="content1" style="z-index: 1;">
10元套餐详情:<br /> 每月套餐内拨打100分钟,超出部分2毛/分钟
</div>
<div id="content2">
30元套餐详情:<br /> 每月套餐内拨打300分钟,超出部分1.5毛/分钟
</div>
<div id="content3">
50元包月详情:<br /> 每月无限量随心打
</div>
</div>

css样式代码如下:

*{
margin:0;
padding: 0;
}
#tab li{
float: left;
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
}
#container{
position: relative;
}
#content1,#content2,#content3{
width: 300px;
height: 100px;
padding:30px;
position: absolute;
top: 40px;
left: 0;
}
#tab1,#content1{
background-color: #ffcc00;
}
#tab2,#content2{
background-color: #ff00cc;
}
#tab3,#content3{
background-color: #00ccff;
}

形成的静态界面如下:

基于jQuery实现多标签页切换的效果(web前端开发)

现在,开始写javascript代码了,实现动态效果,点击哪个标签,对应的页面会显示出来,代码如下:

<script>
function show(n){
var curr=document.querySelector("div[style]");
curr.removeAttribute("style");
document.getElementById("content"+n)
.style.zIndex="1";
}
</script>

页面效果如下:

点击30元套餐,出现的界面:

基于jQuery实现多标签页切换的效果(web前端开发)

点击50元包月的时候,出现的界面:

基于jQuery实现多标签页切换的效果(web前端开发)

方法二:基于jquery,首先我们要在html页面的中引入jquery-1.11.3.js文件

html代码(css样式代码同方法一):

<ul id="tab">
<li id="tab1" value="1">10元套餐</li>
<li id="tab2" value="2">30元套餐</li>
<li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
<div id="content1" style="z-index: 1;">
10元套餐详情:<br /> 每月套餐内拨打100分钟,超出部分2毛/分钟
</div>
<div id="content2">
30元套餐详情:<br /> 每月套餐内拨打300分钟,超出部分1.5毛/分钟
</div>
<div id="content3">
50元包月详情:<br /> 每月无限量随心打
</div>
</div>

js代码如下:

<script>
$("#tab>li").click(function(){
console.log(this);
$("#content"+$(this).val()).attr('style','z-index:1').siblings("div").removeAttr("style");
});
</script>

最终实现的效果同方法一

以上所述是小编给大家介绍的基于jQuery实现多标签页切换的效果(web前端开发),希望对大家有所帮助,如果大家想离家近更多内容敬请关注三水点靠木!

Javascript 相关文章推荐
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
js简单实现调整网页字体大小的方法
Jul 23 #Javascript
jquery实现ajax加载超时提示的方法
Jul 23 #Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 #Javascript
js的各种排序算法实现(总结)
Jul 23 #Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 #Javascript
javaScript事件机制兼容【详细整理】
Jul 23 #Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 #Javascript
You might like
深入php之规范编程命名小结
2013/05/15 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
loading动画特效小结
2017/01/22 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
python 读入多行数据的实例
2018/04/19 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
pytorch 求网络模型参数实例
2019/12/30 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
2014年团队工作总结
2014/11/24 职场文书
毕业设计致谢词
2015/05/14 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP