jQuery实现标签页效果实战（4）_网络技术_宿州市腾雀网络科技有限公司

jQuery实现标签页效果实战（4）

发布时间 - 2026-01-10 22:55:33 点击率：次

今天我们来完成《jQuery实战》系列的标签页效果。先来看一看效果图

这里有两部分的内容，上面是一个标签页的效果，下面也是一个标签页的效果。在实际应用中也经常会见到标签页的效果，它的作用主要是在页面可视区有限的情况下展示更多的内容。当用户想看其他内容的时候不需要离开页面，只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容。门户网站的首页，有很多频道都是标签页的最佳案例，如体育、财经、军事等模块都是位于不同的标签上。上边的标签页一般称为滑动门技术，下面的内容是一次性加载进来，鼠标移动到某个标签之后，下面的内容就跟着显示对应的内容，不需要加载页面。而下面的标签页选用另一种写法，这是通过其他页面load进来的，当你滑动到某个标签的时候，加载对应的页面。

好了，开始编写我们的代码，首先是编写html页面”tab.jsp”。

<body> 
  <ul id="tabfirst">
    <li class="tabin">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
  </ul>
  <div class="contentin contentfirst">我是内容1</div>
  <div class="contentfirst">我是内容2</div>
  <div class="contentfirst">我是内容3</div>  
</body>

一般标签我们都用ul和li来表示，每个li代表一个标签，里面有三个li,分别是标签1，标签2，标签3，下面内容区域是3个div,这三个div是预先装载进来的。这时候的基本骨架已经完成，接下来编写css代码。
第一步把ul里面的li改造为标签的效果。回忆上节的课程，li默认是纵向的效果，我们想把它变成横向用清楚li的特征，然后让其float漂移达到相应的效果。

$(document).ready(function() {
  $("#tabfirst li").mouseover(function() {
    //1.将原来深颜色的li去掉
    $(".tabin").removeClass("tabin");
    //2.将原来显示的div隐藏
    $(".contentin").removeClass("contentin");
    //3.计算鼠标点中哪一个li
    var chooseStr = $(this).html();
    var index = 0;
    if("标签1" == chooseStr) {
      index = 0;
    } else if("标签2" == chooseStr) {
      index = 1;
    } else if("标签3" == chooseStr) {
      index = 2;
    }
    //4.将对应的div显示和对应的li加深
    $("#tabfirst li:eq("+index+")").addClass("tabin");
    $("div.contentfirst:eq("+index+")").addClass("contentin");
  });
});

这里的mouseover()函数的含义是当鼠标进入li时执行函数里面的代码。函数里面的代码先将原来深颜色的li去掉，然后将原来显示的div隐藏，计算鼠标点中哪一个li赋值在index变量中，最后对应的div显示和对应的li加深和将对应的div显示。

下面的标签页思路一样，真个完整的html页面如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../css/tab.css" rel="external nofollow" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/tab.js"></script>
<title>jQuery实战:tab页签</title>
</head>
<body> 
  <ul id="tabfirst">
    <li class="tabin">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
  </ul>
  <div class="contentin contentfirst">我是内容1</div>
  <div class="contentfirst">我是内容2</div>
  <div class="contentfirst">我是内容3</div>
  <br />
  <br />
  <br />
  <ul id="tabsecond">
    <li class="tabin">装入完整页面</li>
    <li>装入部分页面</li>
    <li>从远程获取数据</li>
  </ul>
  <div id="contentsecond">
    <img alt="装载中" src="../image/img-loading.gif" />
    <div id="realcontent"></div>
  </div>
</body>
</html>

css文件如下:

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#tabfirst li {
  float: left;
  background-color: #868686;
  color: white;
  padding: 5px;
  margin-right: 2px;
  border: 1px solid white;
}
#tabfirst li.tabin {
  background-color: #6E6E6E;
  border: 1px solid #6E6E6E;
}
div.contentfirst {
  clear: left;
  background-color: #6E6E6E;
  color: white;
  width: 300px;
  height: 100px;
  padding: 10px;
  display: none;
}
div.contentin {
  display: block;
}

#tabsecond li {
  float: left;
  background-color: white;
  color: blue;
  padding: 5px;
  margin-right: 2px;
  cursor: pointer;
}
#tabsecond li.tabin {
  background-color: #F2F6FB;
  border: 1px solid black;
  border-bottom: 0;
  z-index: 100;
  position: relative;
}
#contentsecond {
  width: 500px;
  height: 200px;
  padding: 10px;
  background-color: #F2F6FB;
  clear: left;
  border: 1px solid black;
  position: relative;
  top: -1px;
}
img {
  display: none;
}

jQuery代码如下:

/**
 * tab页面模块的js代码
 */

$(document).ready(function() {
  $("#tabfirst li").each(function(index){
    //每一个包装li的jquery对象都会执行function中的代码
    //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
    //有了index的值之后，就可以找到当前标签对应的内容区域
    $(this).mouseover(function(){ 
      var liNode = $(this);
      timoutid = setTimeout(function(){
        //将原来显示的内容区域进行隐藏
        $("div.contentin").removeClass("contentin");
        //对有tabin的class定义的li清除tabin的class
        $("#tabfirst li.tabin").removeClass("tabin");
        //当前标签所对应的内容区域显示出来
        //$("div").eq(index).addClass("contentin");
        $("div.contentfirst:eq(" + index + ")").addClass("contentin");
        liNode.addClass("tabin");  
      },300);     
    }).mouseout(function(){
      clearTimeout(timoutid); 
    });
  });

  //在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容
  $("#realcontent").load("../jsp/tabLoad.html");
  //找到标签2效果对应的三个标签，注册鼠标点击事件
  $("#tabsecond li").each(function(index){
    $(this).click(function(){
      $("#tabsecond .tabin").removeClass("tabin");
      $(this).addClass("tabin");

      if(0 == index) {
        $("#realcontent").load("../jsp/tabLoad.html");
      } else if(1 == index) {
        $("#realcontent").load("../jsp/tabLoad1.html h2");
      } else if(2 == index) {
        $("#realcontent").load("/JqueryStudy/tabServlet");
      }
    });
  });

  //对于loading图片绑定ajax请求开始和交互结束的事件
  $("#contentsecond img").bind("ajaxStart",function(){
    $("#realcontent").html("");
    $(this).show();
  }).bind("ajaxStop", function(){
    $(this).slideUp("1000");
  });
});

代码参考地址：https://github.com/shizongger/JqueryInAction

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

参考资料：
1. 王兴奎《jQuery实战》
2. w3school

# jQuery # 标签页 # js与jquery分别实现tab标签页功能的方法 # jQuery实现简单的tab标签页效果 # 基于jQuery实现多标签页切换的效果(web前端开发) # JQuery标签页效果实例详解 # jQuery EasyUI 布局之动态添加tabs标签页 # JQuery标签页效果的两个实例讲解（4） # jQuery EasyUI API 中文文档 - Tabs标签页/选项卡 # jquery tab标签页的制作 # JS实现标签页效果(配合css) # 一个js随机颜色脚本（用于标签页面 # 也可用于任何页面） # 我是 # 鼠标 # 都是 # 不需要 # 加载 # 就可以 # 是一个 # 这是 # 所对应 # 是在 # 好了 # 有很多 # 当你 # 只需 # 要把 # 想看 # 应在 # 门户网站 # 中也 # 想把

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何选择适合网站需求的云服务器配置？

下一篇：c++如何为VSCode配置C++开发环境_c++ VSCo

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何选择适合网站需求的云服务器配置？

下一篇：c++如何为VSCode配置C++开发环境_c++ VSCo