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是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
Javascript中的delete介绍
Sep 02 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
webpack入门+react环境配置
Feb 08 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
vue实现日历表格(element-ui)
Sep 24 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python3 中文文件读写方法
2018/01/23 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Python算法中的时间复杂度问题
2019/11/19 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
机械工程师的岗位职责
2013/11/17 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
六查六看剖析材料
2014/02/15 职场文书
低碳环保标语
2014/06/12 职场文书
高中综合实践活动总结
2014/07/07 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
个人更名证明
2015/06/23 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
mysql联合索引的使用规则
2021/06/23 MySQL
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技