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>