JQuery实现的简单标签选项卡效果

最新推荐文章于 2020-07-09 23:08:05 发布

小龙卷卷风

最新推荐文章于 2020-07-09 23:08:05 发布

阅读量3.6k

点赞数

分类专栏： jQuery 文章标签： jquery function border xhtml class div

本文链接：https://blog.csdn.net/deron7/article/details/7060176

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>
    <title>jQuery实现的标签选项卡效果</title>
    <style type="text/css">
    ul,li
    {
        list-style:none;
        padding:0;
        margin:0; 
        }
     li
     {
         float:left;
         background-color:Silver;
         color:White; 
         padding:5px;
         margin-left:5px;
         border:1px solid White;
         }
       div
       {
           clear:left; 
           background-color:Gray;
           color:White;
           width:240px;
           height:100px;
           padding:3px;
           display:none;
           }
       .content
        {
            display:block;
            }
        .tab
        {
          background-color:Gray;
          border:1px solid Gray;  
            }            
    </style>
     <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         var timeout;//延时全局变量
         $(function () {
             //遍历选项卡
             $('li').each(function (index) {
                 $(this).mouseover(function () {  //鼠标划入
                     var linode = $(this);
                     timeout = setTimeout(function () {        //设置延时，防止鼠标无意移动照成的显示错误
                         $('.content').removeClass("content"); //将原来显示的区域进行隐藏
                         $('.tab').removeClass("tab"); //移除选项卡的特效
                         $(linode).addClass("tab"); //给鼠标划入的选项卡添加tab
                         $('div').eq(index).addClass("content"); //显示划入标签下的内容
                     }, 300);//设置300毫秒的鼠标划入显示延迟
                 }).mouseout(function () {
                     clearTimeout(timeout);//当鼠标离开时清楚延时
                 });
             });
         });
     </script>
</head>
<body>
<h3>jQuery实现的简单标签选项卡效果</h3>
<h4>当鼠标滑向任一选项卡,显示当前选项卡，隐藏其他选项卡</h4>
<h4>设置简单的选项卡高亮效果,当鼠标随意快速划入时不显示当前选项卡内容,停留300毫秒才显示</h4>
<ul>
<li class="tab">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="content">选项卡1的内容</div>
<div>选项卡2的内容</div>
<div>选项卡3的内容</div>
</body>
</html>

小龙卷卷风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现的简单标签选项卡效果

jQuery实现的标签选项卡效果 ul,li { list-style:none; padding:0; margin:0; } li { float:left; background-color:Silver;
复制链接

扫一扫