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 相关文章推荐
jQuery 选择器详解
Jan 19 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
基于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实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php Calender(日历)代码分享
2014/01/03 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
php关联数组快速排序的方法
2015/04/17 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
详解python分布式进程
2018/10/08 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
园长自我鉴定
2013/10/06 职场文书
英语道歉信范文
2014/01/09 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
小学三年级学生评语
2014/04/22 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
导游词之上海豫园
2019/10/24 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL