如题：单独显示 类似横向tab
1
171<!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>
<p class="demo">
<p 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>
</p>
<p 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>
</p>
</p>
<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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
...左边选中触发事件使右边选中...不要做伸手党...