jQuery 标签

最新推荐文章于 2024-08-14 15:20:01 发布

百奇

最新推荐文章于 2024-08-14 15:20:01 发布

阅读量99

点赞数

分类专栏： JQuery 文章标签：学习

本文链接：https://blog.csdn.net/qq_43264596/article/details/83931906

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

标签切换布局实现
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="http://127.0.0.1/web/tab.css" />
<script src="http://127.0.0.1/web/jquery-3.3.1.js"></script>
<script src="http://127.0.0.1/web/tab.js"></script>
</head>

<body>
<ul>
	<li class="tabin">标签1</li>
    <li >标签2</li>
    <li >标签3</li>
</ul>
	<div class="content contentfirst">
            内容1
    </div>
    <div class="contentfirst" >
            内容2
    </div>

     <div class="contentfirst" >
                内容3
     </div>

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
ul,li{
	margin:0;
	padding:0;
	list-style:none;
	}
li{
	float:left;
	background-color:#666;
	color:#FFF;
	border:1px solid #FFF;
	padding:5px;
	margin-right:2px;
	}
.tabin{
	background-color:#333;
	border:1px solid #333;
	}
.contentfirst{
	clear:both;
	background-color:#333;
	width:300px;
	height:100px;
	padding:50px;
	color:#CCC;
	display:none;}
.content{
	display:block;}

标签切换具体实现
.each()方法作用是遍历tabfirst里面所有的li 标签
index参数为获取每次遍历到的li标签

var timeoutid;
$(document).ready(function() {
    $("#tabfirst li").each(function(index){
		var liNode = $(this);
		$(this).mouseover(function(){
		//设置一个定时器，防止用户误划
			timeoutid = setTimeout(function(){
				$("div.content").removeClass("content");
			$("#tabfirst li.tabin").removeClass("tabin");
			$("div").eq(index).addClass("content");
			liNode.addClass("tabin");
				},300)
			}).mouseout(function(){
				clearTimeout(timeoutid);
				});
		});
		
});

标签切换数据加载

// JavaScript Document
var timeoutid;
$(document).ready(function() {
	/*.each()方法作用是遍历tabfirst里面所有的li 标签 
	index参数为每次遍历li标签的下标从0开始
	*/
	
    $("#tabfirst li").each(function(index){
		var liNode = $(this);
		$(this).mouseover(function(){
			timeoutid = setTimeout(function(){
				$("div.content").removeClass("content");
			$("#tabfirst li.tabin").removeClass("tabin");
			$("div").eq(index).addClass("content");
			liNode.addClass("tabin");
				},300)
			}).mouseout(function(){
				clearTimeout(timeoutid);
				
				});
		});
		
	/*首先加载第一个页面*/
	$("#contentsecond").load("http://127.0.0.1/web/myTab.html");
	/*在加载第二个页面之前要首先遍历鼠标所指的是那个标签*/
	$("#tabsecond li").each(function(index) {
        $(this).click(function(){
			$("#tabsecond li").removeClass("tabin");
			$(this).addClass("tabin");
			/*如果index等于0 说明当前加载的是第一个页面*/
			if(index ==0){
				$("#contentsecond").load("http://127.0.0.1/web/myTab.html");
				}else if(index == 1){
					/*当前是第二个页面,只加载部分页面 直接在后面指定内容即可*/
					$("#contentsecond").load("http://127.0.0.1/web/tabload.jsp h2");
					}else if(index == 2){
					/*当前是第三个页面，加载网络服务器上的整个页面 所以直接写路径就行*/
					$("#contentsecond").load("http://127.0.0.1/web/tabload.jsp");
					}
			});
    });
		
});

百奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 标签

标签切换布局实现HTML&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;he...
复制链接

扫一扫

专栏目录