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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
vue使用watch监听属性变化
Apr 30 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 cURL和Rolling cURL并发方式比较
2013/10/30 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
Python对象转JSON字符串的方法
2016/04/27 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
办公室文员自荐书
2014/02/03 职场文书
带薪年假请假条
2014/02/04 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript