jQuery bind事件练习及tab标签切换的实现
来源:互联网 发布:ubuntu 高分屏 字体小 编辑:程序博客网 时间:2024/05/17 01:09
1.bind事件
jQuery部分代码:
<script type="text/javascript">
$(document).ready(function(){
$("input[type=button]").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#ffffff");}
})
})
</script>
html部分代码:
<p>无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</p>
<input type="button" value="click"/>
-----------------------------------------------------------------------------------------------------------------------------------------------
2.tab标签切换的实现
jQuery部分代码:
<script type="text/javascript">
$(document).ready(function(){
var $div_li =$("div.tab_menu ul li");
$("div.tab_box>div").eq(0).show().siblings().hide();
$div_li.click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $div_li.index(this);
$("div.tab_box>div").eq(index).show().siblings().hide();
});
});
</script>
html部分代码:
<div class="tab">
<div class="tab_menu">
<ul>
<li class="active">蓝枫</li>
<li>蓝枫2</li>
<li>蓝枫3</li>
<li>蓝枫4</li>
</ul>
</div>
<div class="tab_box">
<div>蓝枫</div>
<div>蓝枫2</div>
<div>蓝枫3</div>
<div>蓝枫4</div>
</div>
</div>
css样式代码:
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
body{ font-size:12px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif, "宋体";}
ul, ol, li { list-style:none; }
.tab{ margin:50px;}
.tab_menu{ width:279px; height:22px; border:1px solid #ebebeb; border-bottom:none; }
.tab_menu ul{ margin-left:-1px; zoom:1;}
.tab_menu ul li { width:69px; float:left; text-align:center; line-height:22px; background:#ccc; height: 22px; display:inline; cursor:pointer; border-left:1px solid #ebebeb; }
.tab_menu ul .active { font-weight: bold; color: #666; background:#fff;border-bottom: solid 1px #fff; position:relative; z-index:4; margin-bottom:-1px; }
.tab_box{ width:258px; height:200px; line-height:22px; border:1px solid #ebebeb; padding:10px; position:relative;}
大致预览效果如图:
- jQuery bind事件练习及tab标签切换的实现
- jQuery 实现Tab标签切换
- 使用jQuery实现简单的tab栏标签切换
- jQuery切换tab标签
- jQuery实现tab的切换
- jquery div tab标签切换
- js(jquery) tab标签切换
- jquery 实现tab切换
- jquery实现tab切换
- JQUERY实现TAB切换
- jquery实现tab标签选项卡自动切换效果
- jquery实现简单的Tab切换菜单
- jQuery实现简单的tab切换
- 用jQuery实现简单的tab切换
- tab标签切换页实现
- js实现切换Tab标签
- jquery制作的tab标签切换选项卡
- jquery多图tab标签切换焦点图
- ClassNotFoundException: org.hibernate.hql.ast.HqlToken解决之道
- vim 配置文件.vimrc 中的常用设置
- Mysql workbench
- C语言的数组名和对数组名取地址
- 系统设计二(淘宝笔试题,请大家讨论)
- jQuery bind事件练习及tab标签切换的实现
- oc中消息传递机制-附:对performSelector方法的扩充
- 家乡的小河
- GDB调试
- 道德经
- Beginning Python - Chapter6 : Abstraction
- 支持向量机简介
- VIM 笔记
- CMD: DOS 删除目录 rd 命令