jquery 选项卡效果 新手代码


Posted in Javascript onJuly 08, 2011

jquery代码

$(function(){ 
//选项卡 
var $qqbind=$("#qq_1_1 ul li"); //获取要变化的标题为了设置它背景色变化 
$qqbind.click(function(){ 
var ch=$qqbind.has("pre"); //去找带有pre这个标签的标题;pre是设置她的背景样式下面要用 
ch.html(ch.children("pre").html()); //把带有pre标签的去掉 
$(this).wrapInner("<pre></pre>"); //给当前得$qqbind的内容上包围<pre> 元素: $("#tab_bx").children("div").removeClass("show123").addClass("hide123"); //找到id未tab_bx得div移除显示并隐藏 
$("#div"+$(this).attr("name")).addClass("show123"); //找到div并把li中name得值赋给要显示的div 
}); 
})

html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
pre{margin: 0px;padding: 0px;background-color: #00CC33;height: 38px;width: 132px;float: left; background-color:#C90} 
.show{display:inline; z-index:100;} 
.hidde{display:none} 
#qq_1 { float: left;height: auto;width: 770px;} 
#qq_1 #qq_1_1 {height: 38px;width: 100%;} 
#qq_1_1 ul {margin: 0px;padding: 0px;float: left;width: 100%;} 
#qq_1_1 li { cursor:pointer; display: block;height: 38px;list-style-type: none;float: left;margin: 0px;padding: 0px;width: 132px;line-height: 38px; 
text-align: center;font-size: 18px;font-family: "黑体";background-image: url(../images/0123_2.jpg);background-repeat: repeat-y;} #qq_1 .qq_1_2 { float: left;height: 280px;width: 100%;border: 1px solid #CCCCCC;padding-top: 12px;font-size: 13px;padding-right: 0%; 
padding-left: 0%; padding-bottom: 1px;} 
</style> 
<script language="javascript" type="text/javascript" src="JS/jquery-1.4.2.js"></script> 
<script> 
$(document).ready(function(){ 
var $qqbind=$("#qq_1_1 ul li"); //获取要变化的标题为了设置它背景色变化 
$qqbind.click(function(){ 
var ch=$qqbind.has("pre");//去找带有pre这个标签的标题;pre是设置她的背景样式下面要用 
ch.html(ch.children("pre").html()); //把带有pre标签的去掉 
$(this).wrapInner("<pre></pre>");//给当前得$qqbind的内容上包围<pre> 元素: 
$("#tab_bx").children("div").removeClass("show").addClass("hidde");");//找到id未tab_bx得div移除显示并隐藏 
$("#div"+$(this).attr("name")).addClass("show");//找到div并把li中name得值赋给要显示的div 
alert("#div"+$(this).attr("name")); 
}); 
}); 
</script> 
<title>测试</title> 
</head> 
<body> 
<div id="qq_1_1"> 
<ul> 
<li name="1"> 
<pre> QQ币充值</pre> 
</li> 
<li name="2"> 包月服务</li> 
</ul> 
</div> 
<div id="tab_bx"> 
<div id="div1" class="show">QQ币页面</div> 
<div id="div2" class="hidde">游戏页面</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
基于jquery实现图片广告轮换效果代码
Jul 07 #Javascript
jquery调用wcf并展示出数据的方法
Jul 07 #Javascript
基于json的jquery地区联动效果代码
Jul 06 #Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 #Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 #Javascript
jquery中获取元素的几种方式小结
Jul 05 #Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 #Javascript
You might like
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
js页面跳转的常用方法整理
2013/10/18 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python日志logging模块使用方法分析
2019/05/23 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
电子信息科学专业自荐信
2014/01/30 职场文书
干部现实表现材料
2014/02/13 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
捐赠仪式主持词
2014/03/19 职场文书
会计求职自荐信
2014/06/20 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis