• 2
  • 新人请关照

用js实现点击li,显示对应的div中的内容

<div id="tabs" class="tabs">    <ul>        
<li  class="on selected"><a href="tab-1">tab-1</a></li>            <li class="on"><a href="tab-2">tab-2</a></li>            <li class="on"><a href="tab-3">tab-3</a></li>            <li class="on"><a href="tab-4">tab-4</a></li>            <li class="on"><a href="tab-5">tab-5</a></li>        </ul>        
<div id="tab-1" class="panel show">panel-1</div>        <div id="tab-2" class="panel">panel-2</div>        <div id="tab-3" class="panel">panel-3</div>        <div id="tab-4" class="panel">panel-4</div>        <div id="tab-5" class="panel">panel-5</div>    </div>

用js怎么实现点击li,在本页面显示对应的div内容。
如:点击tab-1的li,显示panel-1的div

阅读 551
评论
    2 个回答

    你是要做tabs标签页那种效果吗?
    用的你的例子稍加修改:
    点击tab li 改变对应的div

    jq实现的代码:

        $('#tabs-list>li').click(function () {
             var index = $(this).index();
             $('#tabs-list>li').eq(index).addClass('selected').siblings().removeClass('selected');
             $('.panel').hide();
             $('.panel').eq(index).show();
        });
      撰写回答

      登录后参与交流、获取后续更新提醒