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

Question

<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

Answer 1

你是要做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();
    });

Answer 2

https://codepen.io/voggen/pen...