1效果图：
2代码：
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选项卡效果</title> <link rel="stylesheet" href="../css/tab-list.css"> </head> <body> <div class="main"> <ul id="option"> <li onclick="setTab(0)">第一张</li> <li onclick="setTab(1)">第二张</li> <li class="active" onclick="setTab(2)">第三张</li> <li onclick="setTab(3)">第四张</li> </ul> <ul id="content"> <li>第一张内容</li> <li>第二张内容</li> <li class="active">第三张内容</li> <li>第四张内容</li> </ul> </div> <script src="../js/tab-list.js"></script> </body> </html>
css:
*{ padding:0; margin:0; list-style:none; } .main{ width:100%; margin-top:50px; } #option{ height:38px; line-height:38px; border:1px solid darkgray; width:396px; margin: 0 auto; border-radius:5px 5px 0 0; } #option li{ float:left; height:38px; width:99px; text-align: center; background-color:darkkhaki; border-right:1px solid dargray; cursor: pointer; } #option li.active{ background-color:blue; } #content{ border:1px solid darkgray; border-top:none; width:396px; margin: 0 auto; border-radius:0 0 5px 5px; } #content li{ display:none; height:200px; line-height:200px; text-align: center; } #content li.active{ display:block; }
js:
var options = document.getElementById("option").getElementsByTagName("li"); var contents = document.getElementById("content").getElementsByTagName("li"); function setTab(n){ for(let i=0;i<options.length;i++){ if(i==n){ options[i].className="active"; contents[i].style.display="block"; }else{ options[i].className=""; contents[i].style.display="none"; } } }
3总结：
总的来说，还是用js选中点击的元素，在修改css样式。
学习到的css属性：
1:border-radius:圆角
border-radius:5px;对四个角设置圆角属性
border-radius:5px 0;对左上和右下角设置圆角属性
border-radius:0 0 5px 5px;对右下角和左下角设置圆角属性
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角（顺时针顺序）。
2:cursor: 鼠标移动在选定元素上的样式
cursor：pointer;一只手
cursor：wait;转圈圈
cursor：text;文本
3:display:none;隐藏元素，同时被隐藏的元素不影响页面上的其他元素。
4 补充（2019-10-09），jq实现
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选项卡效果</title> <link rel="stylesheet" href="../css/tab-list.css"> <script src="../js/lib/jquery-3.2.1.min.js"></script> </head> <body> <div class="main"> <ul id="option"> <li class="active">第一张</li> <li>第二张</li> <li>第三张</li> <li>第四张</li> </ul> <ul id="content"> <li class="active">第一张内容</li> <li>第二张内容</li> <li>第三张内容</li> <li>第四张内容</li> </ul> </div> <script src="../js/tab-list.js"></script> </body> </html>
js:
$("ul#option li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$("ul#content li").eq(index).addClass("active").siblings().removeClass("active");
})
总结：
1先选取要触发的区域
2获取点击的dom节点并获取index位置
3对应内容的index的dom节点修改