爱学习的小朋友 2022-05-24 14:14 采纳率: 88.9%
浏览 71
已结题

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>
  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-05-24 14:26
    关注

    示例代码如下

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

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 6月1日
  • 已采纳回答 5月24日
  • 创建了问题 5月24日

悬赏问题

  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 基于8255的交通灯设计
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力
  • ¥15 c语言题目:成绩管理系统