<!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. BA--无风机冷却塔

    无风机冷却塔的优点 1.无运转振动噪音传统冷却塔噪声源为冷却风扇马达运转所产生,其诱发之塔体振动,具有噪音共振加强性,为有效抑制振动之传导,须加装防震铁架及避震器.因冷却方式不同,LFC-N型无风机科 ...

  2. Java泛型（一）：入门、原理、使用

    远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的代码都是类似于下面这样: List list = new ArrayList(); list.add(&q ...

  3. HDU 4046 Panda（树状数组）

    Panda Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  4. 使用gridlayout布局后，因某些原因又删除，并整理文件夹结构时，Unable to resolve target &#39;android-7&#39;

    出现的问题 [2013-01-11 10:52:39 - gridlayout_v7] Unable to resolve target 'android-7' 事由:在一次做九宫格时.误使用了gri ...

  5. 【零基础入门学习Python笔记013】元祖：戴上了枷锁的列表

    元组:戴上了枷锁的列表 因为和列表是近亲关系.所以元祖和列表在实际使用上是很相似的. 本节主要通过讨论元素和列表究竟有什么不同学习元祖. 元组是不可改变元素的.插入.删除或者排序都不能够.列表能够随意 ...

  6. JSP页面动态查询添加数据与分页数据显示

    1 . <%@ page language="java" contentType="text/html; charset=UTF-8"%> < ...

  7. Linux就该这么学 20181011(第十五章邮件)

    参考链接:https://www.linuxprobe.com. https://www.linuxprobe.com/chapter-15.html 电子邮箱系统 foxmail MUA 发送 MT ...

  8. SQL Server数据库性能优化

      开篇:    最近遇到了很多性能问题,一直没来的及总结,今天正好周末抽时间总结下: 对于稍微大点的公司或者说用户多一些的公司,说白了就是数据量较大的公司,在查询数据时往往会遇到很多瓶颈.这时就需要 ...

  9. Hybrid混合开发中schema协议的使用与封装

    混合开发中JS与APP通信的实现原理: JS通过schema协议,传递参数和全局回调函数给APP端 APP执行完(如微信扫一扫)后,调用协议中传入的回调函数,在前端执行回调处理. 默认写法: < ...

  10. 洛谷P3358 最长k可重区间集问题(费用流)

    题目描述 对于给定的开区间集合 I 和正整数 k,计算开区间集合 I 的最长 k可重区间集的长度. 输入输出格式 输入格式: 的第 1 行有 2 个正整数 n和 k,分别表示开区间的个数和开区间的可重 ...