JQuery 生成标签效果

最新推荐文章于 2022-09-21 19:39:13 发布

iteye_2179

最新推荐文章于 2022-09-21 19:39:13 发布

阅读量119

点赞数

分类专栏： JQuery 文章标签： jQuery JavaScript CSS XHTML HTML ViewUI

本文链接：https://blog.csdn.net/iteye_2179/article/details/81929820

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

ul,li{
margin: 0;
padding: 0;
list-style:none;

}

#tabFirst li{
float: left;
background-color:#333333;
padding: 1px;
margin-right: 7px;
color: white;
border: 1px solid white;
}

div.contentinFirst{
clear: left;
background-color:#6e6e6e;
color: white;
width:300px;
height:200px;
padding: 2px;
display:none;
}

#tabFirst li.tabin{
background-color:#6e6e6e;
border: 1px solid #6e6e6e;
}

div.contentin{
display:block;
}

#tabSecond li{
float: left;
background-color:white;
padding: 1px;
margin-right: 7px;
color: blue;
cursor:pointer;
}

div.contentinSecond{
clear: left;
background-color:#f2f6f8;
color: white;
padding: 10px;
width:300px;
height:100px;
border:#000000 solid 1px;
position:relative;
top: -1px;
}

#tabSecond li.tabin{
background-color:#f2f6f8;
border: 1px solid #6e6e6e;
border-bottom: 0;
z-index: 100;
position:relative;

}

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签页效果</title>
<script language="javascript" src="jquery-1.4.1.min.js" ></script>
<script language="javascript" src="tab.js" ></script>
<link type="text/css" href="tab.css" rel="stylesheet" />

<script>

   //静态装载
   $(document).ready(function(){
   var timeoutid;
       $(" #tabFirst li").each(function(index){
       $(this).mouseover(function(){
     var aaa = $(this);
     timeoutid = setTimeout(function(){
     $("div.contentin").removeClass("contentin");
      $("#tabFirst li.tabin").removeClass("tabin");
     $("div.contentinFirst").eq(index).addClass("contentin");
     aaa.addClass("tabin");

     }, 300);

    }).mouseout(function(){
       clearTimeout(timeoutid);
    });
    });
   });



//动态装载

</script>
</head>

<ul id="tabSecond">
<li class="tabin">装入完整页面</li>
<li>装入部分页面</li>
<li>装入远程页面</li>
</ul>

</body>
</html>

iteye_2179

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery 生成标签效果

ul,li{ margin: 0; padding: 0; list-style:none; }#tabFirst li{ float: left; background-color:#333333; padding: 1px; margin-right: 7px; color: white; border: 1px solid white;}div.contenti...
复制链接

扫一扫

专栏目录