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

下面代码中，通过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>

示例代码如下

<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>

设置方法：
1、使用style对象的display属性，值为“none”可隐藏div元素，值为“block”可显示元素；
2、使用style对象的visibility属性，值为“hidden”可隐藏div元素，值为“visible”可显示元素。
具体参考：
http://www.muzhuangnet.com/show/51628.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('.tab li').click(function(){
        var index = $(this).index();
        $(".box ul").eq(index).show().siblings("ul").hide();
    });
});
</script>
</head>
<body>
<div>
    <ul class="tab">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>
</div>
 
<div class="box">
    <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>

</body>
</html>

复制即可用

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632