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

<!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"
},]'
?>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用jQuery来实现tab切换效果,具体实现步骤如下: 1. HTML结构 首先需要准备一个tab的HTML结构,一般是一个ul列表和对应的内容div组成,例如: ``` <ul class="tab-nav"> <li class="active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul> <div class="tab-content"> <div class="tab-pane active">Tab 1 content</div> <div class="tab-pane">Tab 2 content</div> <div class="tab-pane">Tab 3 content</div> </div> ``` 其中,active类表示当前选中的标签。 2. CSS样式 根据需要设置tab的样式,例如: ``` .tab-nav li { display: inline-block; padding: 10px; cursor: pointer; } .tab-nav li.active { background-color: #ccc; } .tab-pane { display: none; } .tab-pane.active { display: block; } ``` 其中,tab-nav和tab-pane分别是tab标签和内容的容器,active类用于控制显示和隐藏。 3. jQuery代码 最后,使用jQuery来实现tab切换效果,具体代码如下: ``` $(function() { // 初始化,显示第一个tab $('.tab-nav li:first').addClass('active'); $('.tab-pane:first').addClass('active'); // 点击tab切换 $('.tab-nav li').click(function() { $('.tab-nav li').removeClass('active'); $(this).addClass('active'); var tab_id = $(this).index(); $('.tab-pane').removeClass('active'); $('.tab-pane:eq(' + tab_id + ')').addClass('active'); }); }); ``` 首先,将第一个tab标签和内容设置为active状态,然后监听tab标签的点击事件,切换对应的标签和内容的active状态。 以上就是使用jQuery实现tab切换效果的具体步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值