<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             *{

                 margin: 0px;

                 padding: 0px;

                 list-style: none;

             }

             ol>li{

                 width: 50px;

                 height: 30px;

                 text-align: center;

                 line-height: 30px;

                 color: red;

                 background: #e0e0e0;

                 display: inline-block;

                 margin-right: 3px;

                 font-weight: bold;

                 cursor: pointer;

             }

             ul{

                 margin: 100px 0px 0px 100px;

                 position: relative;

             }

             ul>li{

                 width: 300px;

                 height: 200px;

                 font-size: 40px;

                 color: #fff;

                 position: absolute;

                 top: 0px;

                 left: 0px;

                 display: none;

             }

             ul>li:nth-of-type(1){

                 background: #ff6700;

             }

             ul>li:nth-of-type(2){

                 background: green;

             }

             ul>li:nth-of-type(3){

                 background: blue;

             }

             .show{

                 display: block;

             }

             .bg{

                 background: #FF6700;

                 color: white;

             }

         </style>

     </head>

     <body>

         <ol id="ol">

             <li>1</li>

             <li>2</li>

             <li>3</li>

         </ol>

         <ul id="ul">

             <li>A</li>

             <li>B</li>

             <li>C</li>

         </ul>

         <script type="text/javascript">

             var li = document.querySelectorAll("ol li");

             var lis = document.querySelectorAll("ul li");

             lis[0].className="show";

             li[0].className = "bg";

             for(var i=0;i<li.length;i++){

                 li[i].index = i;

                 li[i].onmouseover = function(){

                     clear();

                     this.className = "bg";

                     lis[this.index].className = "show";

                 }

             }

             function clear(){

                 for(var j=0;j<lis.length;j++){

                     lis[j].className="";

                     li[j].className="";

                 }

             }

         </script>

     </body>

 </html>

js常用特效——选项卡效果的更多相关文章

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

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

  2. JS-制作网页特效——选项卡效果（水平，点击）

    //总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式.后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div.把他们的样式去 ...

  3. [JS]常用特效js插件

     网站一:http://www.superslide2.com/ function set_a_title(n) { var t = $.trim($(n).text()); t && ...

  4. js常用特效-幻灯片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery,js常用特效名称

  6. JS常用特效方法总结

    1.按Ctrl提交 <body onkeydown="if(event.ctrlKey&&event.keyCode=='13') form1.submit.click ...

  7. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

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

    1效果图: 2代码: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. jQuery常用特效插件汇总

    jquery的CDN引用及下载地址 http://www.bootcdn.cn/jquery/   1:semantictabs.js可以简单地制作Tabs菜单2:tabBox.js可以非常简单方便地 ...

随机推荐

  1. 猫狗分类--Tensorflow实现

    贴一张自己画的思维导图  数据集准备 kaggle猫狗大战数据集(训练),微软的不需要FQ 12500张cat 12500张dog 生成图片路径和标签的List step1:获取D:/Study/Py ...

  2. XML文件基础

      https://c3d.club/xml/basic/2018/12/27/xml-file-base.html 1.文件头 XML文件头有XML声明与DTD文件类型声明组成.其中DTD文件类型声 ...

  3. NHibernate之旅(18)：初探代码生成工具使用

    本节内容 引入 代码生成工具 结语 引入 我们花了大量的篇幅介绍了相关NHibernate的知识.一直都是带着大家手动编写代码,首先创建数据库架构.然后编写持久化类和映射文件,最后编写数据操作方法.測 ...

  4. Mysql第四天 数据库设计

    不考虑主备.集群等方案,基于业务上的设计主要是表结构及表间关系的设计. 而关于表中字段主要是依据业务来进行定义,我们能够指定的大概有这么几项: 存储引擎 一般用InnoDB,特殊需求特殊选用 字符集和 ...

  5. Oracle配置网络服务

    对于Oracle来说.不管是连接本地数据库还是远程连接server数据库,都须要在本机配置网络服务才可连接. 大家可能不明确为什么. 先拿SqlServer来说.SqlServer在连接数据库的时候仅 ...

  6. CountDownTimer，0，0

    @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); s ...

  7. SAM学习笔记

    SAM学习笔记 后缀自动机(模板)NSUBSTR(Caioj1471 || SPOJ 8222) [题意] 给出一个字符串S(S<=250000),令F(x)表示S的所有长度为x的子串中,出现次 ...

  8. TLP电源管理

    笔记本电脑电池坏了, 换了块电池, 顺手装了一下这个电源管理软件.   https://linrunner.de/en/tlp/docs/tlp-linux-advanced-power-manage ...

  9. Ubuntu16.04系统安装搜狗输入法

    前言:正常双击.deb软件包安装搜狗输入法会有bug,需要按照下面操作进行消除错误. 一.下载搜狗输入法Linux版软件包 下载地址为:http://pinyin.sogou.com/linux/ , ...

  10. Spark on YARN运行模式（图文详解）

    不多说,直接上干货! 请移步 Spark on YARN简介与运行wordcount(master.slave1和slave2)(博主推荐) Spark on YARN模式的安装(spark-1.6. ...