基于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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
layui实现数据分页功能
Jul 27 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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 遍历XP文件夹下所有文件
2008/11/27 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
python重试装饰器示例
2014/02/11 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python实现K最近邻算法
2018/01/29 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
中国电视购物:快乐购
2017/02/04 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
JAVA高级程序员面试题
2013/09/06 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
行政助理工作职责范本
2014/03/04 职场文书
合作意向书模板
2014/03/31 职场文书
《观舞记》教学反思
2014/04/16 职场文书
教师网络培训心得体会
2016/01/09 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Nginx配置根据url参数重定向
2022/04/11 Servers
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang