当前位置: 首页 > 编程笔记 >

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

夹谷沛
2023-03-14
本文向大家介绍jQuery实现标签页效果实战(4),包括了jQuery实现标签页效果实战(4)的使用技巧和注意事项,需要的朋友参考一下

今天我们来完成《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+css实现的换页标签栏效果,包括了jQuery+css实现的换页标签栏效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery+css实现的换页标签栏效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》

  • 本文向大家介绍jQuery实现简单的tab标签页效果,包括了jQuery实现简单的tab标签页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现简单的tab标签页效果。分享给大家供大家参考,具体如下: 运行效果图如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结

  • 本文向大家介绍JQuery标签页效果实例详解,包括了JQuery标签页效果实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JQuery标签页效果实现方法。分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: /WebRoot/js/ta

  • 本文向大家介绍JS实现标签页切换效果,包括了JS实现标签页切换效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JQuery标签页效果的两个实例讲解(4),包括了JQuery标签页效果的两个实例讲解(4)的使用技巧和注意事项,需要的朋友参考一下 按照惯例,我们还是先来看一下最终要达到效果图: 和上一个菜单效果类似,当鼠标移动到标签上的时候,下面会显示相应的内容。当然,同样存在滑动门的问题。  前台页面的代码: tab.css tab.js 我们最终实现的效果如图所示: 当单击标签一的时候,下面

  • 本文向大家介绍Laravel+jQuery实现AJAX分页效果,包括了Laravel+jQuery实现AJAX分页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Laravel+jQuery实现AJAX分页效果。分享给大家供大家参考,具体如下: JavaScript部分: php控制器部分: 更多关于Laravel相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》