Detailed explanation of JQuery tab page effect examples

The example in this article describes how to implement the JQuery tab page effect. Share it with everyone for your reference, the details are as follows:

In the first tab, the mouse slides over to display different tabs. In the second tab, click on different tabs to load the content in other pages. The images waiting to be loaded are slowly hidden. The effect is as follows:

/WebRoot/4.Tab.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>JQuery实例4：标签页效果</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link type="text/css" rel="stylesheet" href="css/tab.css" />
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/tab.js"></script>
 </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="Detailed explanation of JQuery tab page effect examples_jquery" src="images/img-loading.gif" />
 <div id="realcontent"></div>
 </div>
 </body>
</html>

Copy after login

/WebRoot/js/tab.js：

var timoutid;
$(document).ready(function(){
 //找到所有的标签
 /*
 $("li").mouseover(function(){
 //将原来显示的内容区域进行隐藏
 $("div.contentin").hide();
 //当前标签所对应的内容区域显示出来
 });
 */
 $("#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("TabLoad.html");
 //找到标签2效果对应的三个标签，注册鼠标点击事件
 $("#tabsecond li").each(function(index){
 $(this).click(function(){
 $("#tabsecond li.tabin").removeClass("tabin");
 $(this).addClass("tabin");
 if (index == 0) {
 //装入静态完成页面
 $("#realcontent").load("TabLoad.html");
 } else if (index == 1) {
 //装入动态部分页面
 $("#realcontent").load("TabLoad.jsph2");
 } else if (index == 2) {
 //装入远程数据（这里也是一个动态页面输出的数据）
 //$("#realcontent").load("TabData.jsp");
 $("#realcontent").load("TabLoad.jsp");
 }
 });
 });
 //对于loading图片绑定ajax请求开始和交互结束的事件
 $("#contentsecond img").bind("ajaxStart",function(){
 //把div里面的内容清空
 $("#realcontent").html("");
 //整个页面中任意ajax交互开始前，function中的内容会被执行
 $(this).show();
 }).bind("ajaxStop",function(){
 //整个页面中任意ajax交互结束后，function中的内容会被执行 
 $(this).slideUp(5000);
 });
});

Copy after login

/WebRoot/css/tab.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;
}

Copy after login

/WebRoot/TabLoad.html:

<!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">
<title>这是一个静态页面</title>
</head>
<body>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
</body>
</html>

Copy after login

/WebRoot/TabLoad.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!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">
<title>动态页面</title>
</head>
<body>
 <h2>
 <%=new Date() %><br>
 1.这是一个动态页面的一部分<br>
 2.这是一个动态页面的一部分<br>
 3.这是一个动态页面的一部分<br>
 </h2>
 这部分不显示<br>
</body>
</html>

Copy after login

JQuery and other development knowledge learned in this section:

1. A group of tags is managed by a ul, and each tag is a li in the ul; the content under the tag is managed by a div

2. The elements following the floating element (float) will surround the floating element. If you do not want this surrounding, you can define the clear attribute on the element after the floating element to clear this effect.

3. To achieve the integration of the current label and the content area, this can be achieved by using the same background color and using the same color border for the current label.

4. The mouseover and mouseout methods in JQuery correspond to the onmouseover and onmouseout events of standard javascript and can handle mouse entry and exit events.

5. Execute the each method on a JQuery object containing multiple elements. The content of the function that can be registered to the each method is executed by each element. At the same time, this function can also receive a parameter indicating the index value of this element. Many methods in JQuery also use each

6. The eq method can only get one of the multiple elements contained in the JQuery object based on the index value, and still return the new JQuery object corresponding to the element.

7. Use eq in the selector, such as $(“div:eq(1)”)

8. The addClass and removeClass methods are used to add and remove the class definition of elements.

9. The setTimeout method in Javascript can delay the execution of certain codes, and the corresponding clearTimeout can clear the set delay operation.

10. When making an AJAX application, you can consider debugging it on FireFox now, and then check it in other browsers and correct possible compatibility issues.

11. The cursor attribute can control the mouse style on the element. The pointer attribute value represents the hand style, which is our common link mouse style

12. The position attribute can control the way the element is positioned. When the value is relative, it means positioning relative to the original position. You can set the values of top, left, bottom, and right
Control the movement of elements relative to their original positions

13.z-index can control the layer height of elements on the page. The larger the value, the higher it will be in the layer of the page, and it will also cover some elements with lower z-index values. Only for elements whose position value is relative or absolute, z-index will take effect.

14. The load method in JQuery is very powerful. It can load the data output from a specified static or dynamic page or server-side program into the element wrapped by the JQuery object that executes the load method.

15. The load method also supports partial loading. Add a space after the loaded page address, and then use the selector to load the part of the page that matches the selector.

16. The loaded page must be UTF-8 encoded, otherwise the Chinese characters will be garbled after loading.

17.bind can be used to bind Javascript events or events defined in JQuery to the specified node. For events that do not directly provide registration methods in JQuery, you can register them in this way. The second parameter of the method can be the method definition of the event execution.

18.ajaxStart and ajaxStop correspond to the events before and after the ajax interaction starts and ends. After registering these two events for a node, the specified method will be executed before and after the ajax interaction on the current page starts and ends.

I hope this article will be helpful to everyone in jQuery programming.