基于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 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
js瀑布流布局的实现
Jun 28 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
如何使JavaScript休眠或等待
Apr 27 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
全文搜索和替换
2006/10/09 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
node中的cookie的具体使用
2018/09/13 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python实现装饰器、描述符
2018/02/28 Python
Python判断有效的数独算法示例
2019/02/23 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python读取实时数据流示例
2019/12/02 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
创联软件面试题笔试题
2012/10/07 面试题
留学自荐信的技巧
2013/10/17 职场文书
丑小鸭教学反思
2014/02/03 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
少先队工作总结2015
2015/05/13 职场文书
法律意见书范文
2015/06/04 职场文书
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android