tab标签页

最新推荐文章于 2023-09-21 21:23:13 发布

elite_2009

最新推荐文章于 2023-09-21 21:23:13 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： function class stylesheet div jquery float

本文链接：https://blog.youkuaiyun.com/elite_2009/article/details/6330951

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用JQuery实现标签页效果的方法。通过CSS样式美化页面布局，并结合HTML结构，利用JQuery的事件监听功能实现标签切换时内容区域的动态展示与隐藏。此方案适用于快速开发具有交互性的网页应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

－－－－－－－－－css

ui,li
{
margin:0;
padding:0;
list-style:none;
}
li
{
float:left;
background=color:#868688;
color:black;
padding:5px;
margin-right:2px;
boder:1px solid:white;
}
li.tabin{
   background-color:#6e6e6e;
   boder:1px solid:#6e6e6e;
}
div
{
   clear:left;
   background-color:#6e6e6e;
   color:white;
   width:300px;
   hight:100px;
   padding:10px;
   display:none;

}
div.contentin{
display:block;
}

---------tab.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery-标签页效果</title>
<link type="text/css" rel="stylesheet" href="css/tab.css">
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="tab.js"></script>
</head>

----------tab.js

$(function(){
     //找到所有标签
    /*$("li").mouseover(function(){
        //将原来显示的内容区域进行隐藏
        //   $("div.contentin").hide();
//当前标签所对应的内容区域显示出来
//   alert("mouse over");
        }).mouseout(function(){
        //将当前标签对应的内容区域隐藏
        alert("mouse out");
     */
$("li").each(function(index){
//每一个包装li的Jquery对象都会执行function中的代码
//index是当前执行这个function代码的li对应在所有li组成的数组中索引值
//有了index的值之后，就可以找到当前标签对应的内容区域
              $(this).mouseover(function(){
       //将原来显示的内容区域进行隐藏
                      $("div.contentin").removeClass("contentin");
        //对有tabin的class定义的li清除tabin的class
        $("li.tabin").removeClass.("tabin");
        //当前标签所对应的内容区域显示出来
        $("div").eq(index).addClass("contentin");
        $(this).addClass("tabin");
   })