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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
javascript实现yield的方法
Nov 06 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
详解React中的组件通信问题
Jul 31 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
vue构建动态表单的方法示例
Sep 22 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 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
Chrome Web App开发小结
2014/09/04 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python中split方法用法分析
2015/04/17 Python
python实现爬取图书封面
2018/07/05 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
python集合能干吗
2020/07/19 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
J2EE中常用的名词进行解释
2015/11/09 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
电气自动化大学生求职信
2013/10/16 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL