×

Tab标签页的切换效果

作者:ceshi2018.04.16来源:Web前端之家浏览:1090评论:0
关键词:JQueryJS
Tab标签页的切换效果,这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件

1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法

2 mouseover事件,

还有就是关键的css样式编写,控制显示的样式,

<!DOCTYPE html> 
<HTML> 
<HEAD> 
<TITLE>tab </TITLE> 
<link rel="stylesheet" type="text/css" href="css/tab.css"> 
<script type="text/javascript" src="/demo/js/jq.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); 
            }); 
        }); 
    }); 
});
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/svg1488038400915.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • asidl

    这个DEMO应该再细点更好。。。...

  • 今天头条

    文章不错非常喜欢...

  • admin

    可以交换链接~...

  • 周松松博客

    确实不会用...

  • 便宜vps

    https://www.yd631.com/(便宜vps)申请交换链接,不知可否?联系邮箱:...

  • 访客

    我是里奥梅西,现在荒的一逼!!!...

  • qlong

    mailAutoComplete插件好用。...

  • admin

    相辅相成,都可以实现TIPS提示功能,只是形式不一样。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero