用js和css实现选项卡效果+jq(2019-10-09)

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

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>

View Code

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节点修改

用js和css实现选项卡效果+jq(2019-10-09)

1效果图：

2代码：

3总结：

4 补充（2019-10-09），jq实现

猜你喜欢