jQuery bind事件练习及tab标签切换的实现
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标签切换的实现相关推荐
- html tab切换jquery,jQuery版Tab标签切换
鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换 效果图: 源代码: Tab标签切换 body{ background:#fff;} *{ mar ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- html5 css3 卡片切换,HTML5之纯CSS3实现的tab标签切换
HTML5的运用之纯CSS3实现的tab标签切换 CSS3代码实现的tab标签切换 *{padding:0px;margin:0px;} #tab{margin:20px;20px;position: ...
- vue2.0 实现tab标签切换效果 内容可以自行定义
利用vue2.0 实现tab标签切换效果 比较实用 初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以. ...
- 关于element tab标签切换加载闪一下的问题
之前开发就遇到过这个问题,当时解决了也没记录下来,今天来说下这个问题!!! 解决之前的代码如下: <el-tabs v-model="activeName2" type=&q ...
- html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index ...
- 【Little Demo】从简单的Tab标签到Tab图片切换
Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容.目前在各大网站都有存在这种效果.例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等. 1.简单的 Tab 标签 ...
- layui tab标签 设置只读，不可手动切换 外部按钮切换tab
设置只读最核心的代码只有一个 style="pointer-events: none;" 外部按钮切换tab的核心代码: 要使用layui 的element这个组件对象 最外面的一 ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
最新文章
- 挂代理无法访问网页了怎么办_搜索引擎蜘蛛不能爬取网页的原因有哪些
- 10个可以简化开发过程的MySQL工具
- 决策树原理实例(python代码实现)_决策树原理实例（python代码实现）
- 关东升的iOS实战系列图书 《iOS实战：传感器卷（Swift版）》已经上市
- 草稿 断开式数据连接
- 21天让你成为Horizon View高手—Day11:手动池的创建
- C#winform省市县联动，以及有的县是空值时显示异常的处理
- Kaggle竞赛实战系列（一）：手写数字识别器（Digit Recognizer）得分99.53％、99.91%和100%
- jQuery插件的简单使用及制作
- 大数据开发入门怎么学习？
- 爱加密加固病毒分析-破解篇
- 三类互联网创业方式
- 计算机表格斜杠怎么打,excel表格打斜杠的方法步骤图详解
- Git上一些不错的项目
- 我对于微信文章的感悟
- 云计算时代的技术架构与开发模式
- oracle 的乘法,Oracle group by 相乘
- 2020年千兆路由器推荐 数码宅男来带路 赶紧M
- 0082-莱布尼兹三角形
- 3dmax 计算机中丢失,3ds Max文件损坏或丢失怎么办？