Jquery实现内容切换选项卡

/**
 * TAB选项卡
 */
function ToggleTab(n){
	var tag = $(n.tag);
	var tab = $(n.tab);
	var e = n.e || 'mouseover';
	tag.on( e ,function(){
		$(this).addClass('now').siblings().removeClass('now');
		tab.eq($(this).index()).show().siblings('.tab').hide();//每个li标签的位置和tab位置相同
	});
}

简单有效,哈哈。上代码

$(function(){
      ToggleTab({
        tag : '#tabContent .tag li',
        tab : '#tabContent .tab'
      });
    });

html部分

<div class="m-tabContent" id="tabContent">
  <ul class="tag">
    <li class='now'><a href="/news/zxtop/" target="_blank">测试1</a></li>
    <li><a href="/news/ygdt/" target="_blank">测试2</a></li>
  </ul>
  <div class="tab">
    <dl>
      <dt><a href="/news/zxtop/8462.html">测试1</a></dt>
      <dd class="info">2015年起南京已全面启动“智慧医疗”建设计划。...</dd>
    </dl>
  </div>
  <div class="tab" style="display:none;">
    <dl>
      <dt><a href="/news/zxtop/8462.html">测试2</a></dt>
      <dd class="info">日前,根据公布的《南京市智慧医疗项目建设实施方案</dd>
    </dl>
  </div>
</div>






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值