时间:2021-05-26
这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件
1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法
2 mouseover事件,
还有就是关键的css样式编写,控制显示的样式,
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>tab </TITLE>
<link rel="stylesheet" type="text/css" href="css/tab.css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</HEAD>
<BODY>
<ul id="ularea">
<li class="listli">标签1</li>
<li >标签2</li>
<li >标签3</li>
</ul>
<div class="divarea">内容1</div>
<div>内容2</div>
<div>内容3</div>
</BODY>
</HTML>
接下来就是控制样式的css
复制代码 代码如下:
ul ,li { margin:0px;
padding:0px;
list-style:none;
}
li { float:left;
background-color:#66CC00;
margin-right:2px; //这个是设置标签之间的间距
padding:5px;
border:1px solid white;
height:20px;
color:white;
}
.listli { background-color:#663333;
border:1px solid #663333;
}
div { clear:left;
width:300px;
height:100px;
background-color:#663333;
border-top:0px;
color:white;
display:none;
}
.divarea { display:block; }
下来就是编写控制滑动的js
复制代码 代码如下:
//定义全局变量
var timeout;
$(document).ready(function(){
//找到所有的li标签
$("li").each(function(index){
$(this).mouseover(function(){
//滑动门都要设置一个延迟时间,避免用户疯狂移动鼠标,导致服务器崩溃,这个很重要
timeout =setTimeout(function(){
$("div.divarea").removeClass("divarea");
$("li.listli").removeClass("listli");
// $("div").eq(index).addClass("divarea"); //另一种写法是:$(div:eq(index)).addClass("divarea");
$("div:eq("+index+")").addClass("divarea");
$("li").eq(index).addClass("listli");
},
320);
$(this).mouseout(function(){
clearTimeout(timeout);
});
});
});
});
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
标签页的切换方式如下所示:1、控制tab的显示与隐藏2、tab不切换,数据加载控制tab的显示与隐藏前端脚本:1、jquery实现:$(function(){$
测试环境jquery-easyui-1.5.3需求场景打开tab页面时,自动载入一个iframe页面,除了iframe页面本身会出现一个滚动条,tab标签页也出
本文实例讲述了jQuery实现tab标签自动切换的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:jQuery实现的tab标签自动切换效果*{m
业务需求:切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存。实现:1、先在store的state里面设置一个要缓存
Tabs【标签】创建一个tab标签使用说明使用到的头文件:easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easy