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

dreamlivemeng

2017-02-08

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

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

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

安科网

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

dreamlivemeng

dreamlivemeng

相关推荐

jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

详解Vue数据驱动原理

JavaScript枚举选择jquery插件代码实例

7个 jQuery上手项目，Github超千人star

jQuery实现带进度条的轮播图

jQuery实现鼠标拖拽登录框移动效果

jquery实现简易验证插件封装

jQuery实现朋友圈查看图片

jQuery实现日历效果

jQuery中event.target和this的区别详解

9.jQuery初识—选择器、效果

Kendo UI for jQuery数据管理使用教程：PDF导出（二）

JQuery 06 属性

取代Jquery，用Vue 构建Bootstrap 4 应用

隐式迭代---ES5的数组方法以及jQuery的方法调用

jQuery Ajax 操作函数汇总

jQuery validate验证表单隐藏域

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

Ant-design中使用jQuery

56-58-前端-jQuery

dreamlivemeng