左右联动的特效{已搞定，留给需要的人}

Question

左右联动的特效{已搞定，留给需要的人}

发布于
2016-10-10

更新于
2016-10-11

如题：单独显示类似横向tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        .demo{
            height:400px;
        }
        .left{
            float: left;
            width:45%;
            background: #ccc;
            height:400px;
            overflow-y: auto;
        }
        .left p{
            height:30px;
        }
        .right{
            float: right;
            width:45%;
            background: #ccc;
            height:400px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="demo">
    <div class="left">
        <p><input type="radio" name="123" index="0" checked="checked">test1</p>
        <p><input type="radio" name="123" index="1">test2</p>
        <p><input type="radio" name="123" index="2">test3</p>
        <p><input type="radio" name="123" index="3">test4</p>
        <p><input type="radio" name="123" index="4">test5</p>
        <p><input type="radio" name="123" index="5">test6</p>
    </div>
    <div class="right">
        <ul index="0">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul style="display: none;" index="1">
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul style="display: none;" index="2">
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>
        <ul style="display: none;" index="3">
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
        <ul style="display: none;" index="4">
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
        </ul>
        <ul style="display: none;" index="5">
            <li>26</li>
            <li>26</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(".left p input").click(function(){
            var ab=$(this).attr("index");
            var cd=$(this).parent().parent().siblings().children();
            $.each(cd,function(){
                if($(this).attr("index")===ab){
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
        });
});
</script>
</body>
</html>

javascript jquery

阅读 3.2k

1 个回答

得票最新

半叶森

791117

发布于
2016-10-10

...左边选中触发事件使右边选中...不要做伸手党...

撰写回答