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

网络编程 2024/11/14 佚名

3 2 1

今天我们来完成《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="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">

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,标签页

标签：

jQuery,标签页

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“jQuery实现标签页效果实战（4）”

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

暂无“jQuery实现标签页效果实战（4）”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

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

jQuery,标签页

Canvas + JavaScript 制作图片粒子效果

Angular.JS实现无限级的联动菜单(使用demo)

评论“jQuery实现标签页效果实战（4）”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接