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. js进阶 11-21 纯css实现选项卡

    js进阶 11-21 纯css实现选项卡 一.总结 一句话总结:核心原理,a标签的锚点效果+父div限宽+多的部分隐藏. 1.如何实现a标签的锚点效果? href属性找到对应的位置就好,和选择器一样, ...

  2. 原生JS、CSS实现的转盘效果（目前仅支持webkit）

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  3. CSS3及JS简单实现选项卡效果（适配手机端和pc端）

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  4. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  5. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  6. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  7. Javascript进阶篇——总结--DOM案例+选项卡效果

    断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...

  8. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  9. Vue 框架-06-条件语句 v-if 实现选项卡效果

    Vue 框架-06-条件语句 v-if 实现选项卡效果 本片介绍的是 Vue 中条件语句 v-if 第一个小实例是,通过 v-if="布尔值",通过布尔值的真假来决定,某元素是否显 ...

随机推荐

  1. 【流畅的python】16.1 - 生成器如何进化成协程

    在生成器中加入yield关键字后,生成器调用方可以向生成器传入值,只需要使用.send(...)方法就可以传送数据.发送的数据会成为生成器函数中yield表达式的值.所以生成器可以作为协程使用. 协程 ...

  2. 注册中心nacos完整部署及与eureka区别

    1. 场景描述 nacos最近用的比较多,介绍下nacos及部署吧,刚看了下以前写过类似的,不过没写如何部署及与eureka区别,只展示了效果,补补吧. 2.解决方案 2.1 nacos与eureka ...

  3. Windows内核编程时的习惯与注意事项

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 一.内核编程注意细节: 在头文件中使用的是 <ntddk.h ...

  4. 前端深入之css篇丨2020年前，彻底掌握css动画【transition】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  5. Node.js入门教程 第三篇 （模块及路由）

    Node.js的模块 Node.js的模块与传统面向对象的类(class)不完全相同.Node.js认为文件即模块,即一个文件是一个模块.单一文件一般只专注做一件事情,保证了代码的简洁性. 创建模块: ...

  6. jdbc 以及 事务的java类编写

    package com.gaosheng.utils; import java.sql.Connection;import java.sql.SQLException; import javax.sq ...

  7. Mysql存储引擎以及锁机制

    一.常用命令 1.查看引擎(默认为InnoDB) 查看mysql提供的存储引擎:show engienes 查看mysql当前默认的存储引擎:show variables like '%storage ...

  8. NOIP2011计算系数；

    #include<cmath> #include<algorithm> #include<stdio.h> #include<iostream> #de ...

  9. js通过方法返回对象的注意点

    问题:js通过方法返回一个字面量对象和返回一个提前已经定义好的字面量对象有区别吗? 答案:有 我们先来看看第一种情况,fun1方法返回一个提前没定义的字面量对象,然后通过调用方法返回三个对象,分别是o ...

  10. Web渗透之mssql LOG备份getshell

    log备份的总结 当SQL注入是得到DB权限时候,接下来可以做的工作很多,象找管理员密码,后台管理这些都可以帮助你拿到WEBSHELL,但是这篇文章讲的是log备份,LOG备份出来的小马的体积小,而且 ...