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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
javascript如何写热点图
Dec 08 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python提取页面内url列表的方法
2015/05/25 Python
python3.x实现发送邮件功能
2018/05/22 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
浅析Python requests 模块
2020/10/09 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
大学社团活动策划书
2014/01/26 职场文书
元旦晚会邀请函
2014/02/01 职场文书
代理班主任的自我评价
2014/02/04 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
决心书格式范文
2015/09/23 职场文书