js或jq控制两个对应的元素显示隐藏

Question

下面代码中，通过js或者jq实现，点击第一个div中的li，对应的另一个div中的ul就显示呢？

<div>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>
</div>

<div>
    <ul style="display:none;"><!--对应列表1-->
        <li>列表1.1</li>
        <li>列表1.2</li>
        <li>列表1.3</li>
    </ul>

    <ul style="display:none;"><!--对应列表2-->
        <li>列表2.1</li>
        <li>列表2.2</li>
        <li>列表2.3</li>
    </ul>

    <ul style="display:none;"><!--对应列表3-->
        <li>列表3.1</li>
        <li>列表3.2</li>
        <li>列表3.3</li>
    </ul>

    <ul style="display:none;"><!--对应列表4-->
        <li>列表4.1</li>
        <li>列表4.2</li>
        <li>列表4.3</li>
    </ul>
</div>

Answer 1

示例代码如下

<style>
    .on{background:#f00;color:#fff}
</style>
<div>
    <ul class="tabs">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>
</div>

<div class="tabcontents">
    <ul style="display:none;">
        <!--对应列表1-->
        <li>列表1.1</li>
        <li>列表1.2</li>
        <li>列表1.3</li>
    </ul>

    <ul style="display:none;">
        <!--对应列表2-->
        <li>列表2.1</li>
        <li>列表2.2</li>
        <li>列表2.3</li>
    </ul>

    <ul style="display:none;">
        <!--对应列表3-->
        <li>列表3.1</li>
        <li>列表3.2</li>
        <li>列表3.3</li>
    </ul>

    <ul style="display:none;">
        <!--对应列表4-->
        <li>列表4.1</li>
        <li>列表4.2</li>
        <li>列表4.3</li>
    </ul>
</div>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    var tabs = $('.tabcontents ul');
    $('.tabs li').mouseenter(function () {
        tabs.hide().eq($(this).index()).show();
        $(this).addClass('on').siblings().removeClass('on')
    })
</script>