用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>

css:

*{

  padding:;

  margin:;

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

巴特西

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

1效果图：

2代码：

3总结：

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

最新文章

热门文章