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

时间：2021-05-26

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

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章