jQuery实现标签页效果实战(4)


Posted in Javascript onFebruary 08, 2017

今天我们来完成《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

Javascript 相关文章推荐
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
Vue详细的入门笔记
May 10 Vue.js
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 #Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 #Javascript
jQuery实现级联下拉框实战(5)
Feb 08 #Javascript
webpack入门+react环境配置
Feb 08 #Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 #Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 #Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP无限分类(树形类)
2013/09/28 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
浅谈Python中的数据类型
2015/05/05 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python socket 聊天室实例代码详解
2019/11/14 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
德育标兵事迹材料
2014/08/24 职场文书
关于教师节的广播稿
2014/09/10 职场文书
思想品德评语大全
2014/12/31 职场文书
国际贸易实训总结
2015/08/03 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS