用js和css实现选项卡效果

最新推荐文章于 2020-05-15 13:43:48 发布

avsibao194196

最新推荐文章于 2020-05-15 13:43:48 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/Zxq-zn/p/11377809.html

版权

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>

View Code

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

View Code

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";
    }
  }
}

View Code

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;隐藏元素，同时被隐藏的元素不影响页面上的其他元素。

转载于:https://www.cnblogs.com/Zxq-zn/p/11377809.html

avsibao194196

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js和css实现选项卡效果

1效果图：2代码：html:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫