基于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 相关文章推荐
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JavaScript中string对象
Jun 12 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 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配置文件php.ini的路径的方法
2014/08/20 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
Javascript Select操作大集合
2009/05/26 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python列表推导式的使用方法
2013/11/21 Python
初步探究Python程序的执行原理
2015/04/11 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
出国签证在职证明
2014/01/16 职场文书
团日活动总结报告
2014/06/25 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
市级三好生竞选稿
2015/11/21 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
Java Socket实现多人聊天系统
2021/07/15 Java/Android
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
MySQL池化框架学习接池自定义
2022/07/23 MySQL
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python