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
});
})
<!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>
相关推荐
-
jquery tools之tabs 选项卡/页签
虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex.该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减少了
-
jQuery之选项卡的简单实现
jQuery实现选项卡功能.首先将界面搭建好. 有导航头tab_menu,还有内容tab_box. 要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉. 同时为了展现选中状态,为选中的项添加背景,以示区别. 这一次,我自己写了代码,先看html部分: 复制代码 代码如下: <div class="tab"> <div class="tab_menu"> <ul> <li
-
25个最好的免费Eclipse插件
Eclipse提供了一个可扩展插件的开发系统.这就使得Eclipse在运行系统之上可以实现各种功能.这些插件也不同于其他的应用(插件的功能是最难用代码实现的).拥有合适的Eclipse插件是非常重要的,因为它们能让Java开发者们无缝的开发基于J2EE和服务的应用程序.Eclipse的插件也能帮助他们开发不同应用架构上的程序. 下面列出来的是25个最好的免费Eclipse插件,可以让开发者更高效的工作 . 提高代码质量的插件 1. FindBugs FindBugs可以帮你找到Java代码中的b
-
基于JQuery的6个Tab选项卡插件
顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2
-
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="
-
jquery多选项卡效果实例代码(附效果图)
复制代码 代码如下: <script type="text/javascript"> $(function() { $(".designerspanel").each(function(){ $(this).find(".tabspanel #show:not(:first)").hide(); }); $(".designerspanel li").clic
-
JQuery Tab选项卡效果代码改进版
介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享 这是js脚本 复制代码 代码如下: /* jque
-
jquery 选项卡效果 新手代码
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标
-
实用的Jquery选项卡TAB示例代码
复制代码 代码如下: <!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=&qu
-
javascript css红色经典选项卡效果实现代码
本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ font
-
layui选项卡效果实现代码
本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body&
-
JQuery 选项卡效果(JS与HTML的分离)
在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. Javascript(jquery)代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child&
-
JS实现选项卡效果的代码实例
选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧. 先来布局一个简单的页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #box
-
微信小程序 实现tabs选项卡效果实例代码
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断
-
jquery 卷帘效果实现代码(不同方向)
demo01.htm 复制代码 代码如下: <!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 htt
-
jquery实现经典的淡入淡出选项卡效果代码
本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM