JQ tab 切换-局部刷新(关于index)

最新推荐文章于 2023-04-28 15:48:50 发布

原创最新推荐文章于 2023-04-28 15:48:50 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #this #index

jquery小结专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种利用jQuery简化DOM操作的方法，通过点击不同标签页来动态加载内容，展示了如何利用$(this).index()获取元素索引，避免了使用for循环遍历，提高了代码效率。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>TAB切换</title>
	<style type="text/css">
		#tit{
			list-style: none;
			padding: 0;
		}
		#tit li{
			float: left;
			padding: 0 15px;
			background: gray;
		}
		#con{
			clear: both;
		}
	</style>
	<script type="text/javascript" src="jquery-1.11.1.js"></script>
</head>
<body>
	<ul id="tit">
		<li>新闻一</li>
		<li>新闻二</li>
		<li>新闻三</li>
	</ul>
	<div id="con">
		<div></div>
	</div>
</body>
<script type="text/javascript">
	var url = "tab.php";
	var send = "get"
	$("ul>li").click(function(){
		<span style="color:#ff0000;">var a = $(this).index();</span>
		$.ajax({
			url:url,
			data:send,
			success:function(data){
				var newdata = eval(data)
				<span style="color:#cc0000;">$("#con div").html(newdata[a].time)</span>;	
			}
		})
	})
</script>
<p></html></p>

jquery当中可以通过$(this).index()获取到当前的索引值，这样就不需要用for循环进行遍历

<?php

echo '[{
"time":"2014-08-11"
},{
"time":"2014-08-12"
},{
"time":"2014-08-13"
},]'
?>