选项卡的简单原理实现

大家好,我是绅士扮演者,我喜欢将平时练的小案例拿出来与大家分享,也欢迎各位高人评论我的代码,提升技术,留下您宝贵的意见。有些地方可能没有注释,如果感觉有问题可以评论或私聊我都行。

平时小案例之--选项卡:

大家平常写选项卡应该都是通过设置class属性来通过动态添加或设置类名来实现内容的切换吧,我感觉那样的话要设置两套属性,不如直接动态设置css样式来控制内容的切换。下面是简单样式的源码(如有不好的地方,欢迎大家指正):

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
        <style type="text/css">
         *{padding:0;margin: 0;}
         ul>li{list-style: none;}
         div{width: 400px;height: 300px;margin: 50px auto;border: 1px solid black;overflow: hidden;}
         .sm{float: left;width: 100px;height: 20px;border-bottom: 1px solid black;}
         .lg{width: 400px;height: 280px;background: green;margin-top: 20px;}
        </style>
 </head>
 <body>
  <div>
   <ul id="ul1">
    <li class="sm" >1</li>
    <li class="sm" >2</li>
    <li class="sm" >3</li>
    <li class="sm" >4</li>
   </ul>
   
   <ul id="ul2">
    <li class="lg" >111111</li>
    <li class="lg" style="display: none;">22222</li>
    <li class="lg" style="display: none;">333333333</li>
    <li class="lg" style="display: none;">444444444</li>
   </ul>
  </div>
 </body>
</html>
<script type="text/javascript">
 var sm=document.getElementsByClassName("sm"),
     lg=document.getElementsByClassName("lg");
     for(var i=0;i<sm.length;i++){
      sm[i].index=i;
      sm[i].onmouseover=function(){
       for(var j=0;j<lg.length;j++){
       lg[j].style.display="none"; 
       }
//       console.log(this.index);
       this.style.backgroundColor="indianred";
       lg[this.index].style.display="block";
      }
      sm[i].onmouseout=function(){
       this.style.backgroundColor="white";
//          lg[i].style.display="none";
      }
     }
</script>

当然,大体思想还是排他思想。

时间: 2024-11-05 13:32:55

选项卡的简单原理实现的相关文章

聊天室刷屏的简单原理实现

在聊天室中,如果我们想要实现刷屏的效果,其实很简单,因为这些我们都可以通过前台的js来完成. 首先,说一下原理,就是通过javascript来模拟文字的输入,来模拟提交按钮的点击.这里要实现这些,首先我们需要浏览器的debug,比如firefox的firebug,或者自带的调试工具也可,或者chrome的console台,ie+8的F12 开发者工具. 下面举个简单的例子: 首先审查元素,找到输入框的id比如:id="postTex"t, 然后找到提交的id或者css,比如 class

插件的简单原理

using IExtendServices; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Reflection; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace 插件的简单原理 { public class ExtendSe

java——关于异常处理机制的简单原理和应用

异常处理机制的简单原理和应用 一.Execption可以分为java标准定义的异常和程序员自定义异常2种 (1)一种是当程序违反了java语规则的时候,JAVA虚拟机就会将发生的错误表示为一个异常.这里语法规则指的是JAVA类库内置的语义检查. 例如 int i = 2 / 0 或者 String str = null;str.length(); (2)另一种情况就是JAVA允许程序员扩展这种语义检查,程序员可以创建自己的异常,并自由选择在何时用throw关键字引发异常. 例如 Exceptio

C# ORM简单原理

对象/关系数据库映射(object/relational mapping,ORM)这个术语表示一种技术,用来把对象模型表示的对象映射到基于SQL的关系模型数据结构中去. 在今日的企业环境中,把面向对象的软件和关系数据库一起使用可能是相当麻烦和浪费时间的,ORM 不仅仅管理.NET类到数据库表的映射(包括.NET 数据类型到SQL数据类型的映射),还提供数据查询和获取数据的方法,可以大幅度减少开发时人工使用SQL和ADO.NET处理数据的时间. 现在有很多成熟的开源框架支持ORM,如:NHiber

Java中的异常处理机制的简单原理和应用。

异常是指java程序运行时(非编译)所发生的非正常情况或错误,与现实生活中的事件很相似,现实生活中的事件可以包含事件发生的时间.地点.人物.情节等信息,可以用一个对象来表示,Java使用面向对象的方式来处理异常,它把程序中发生的每个异常也都分别封装到一个对象来表示的,该对象中包含有异常的信息. Java对异常进行了分类,不同类型的异常分别用不同的Java类表示,所有异常的根类为java.lang.Throwable,Throwable下面又派生了两个子类:Error和Exception,Erro

Spring MVC简单原理

Spring MVC简单原理 针对有Java Web基础.Spring基础和Spring MVC使用经验者,文章比较简单,权当自己的一个总结和备忘吧. 前言 目前基于Java的web后端,Spring生态应该是比较常见了.虽然现在流行前后端分离,MVC和后端模板渲染越来越少,后端专注向前端提供数据接口.但由于笔者维护着一个老项目,既有JSP技术也有只返回JSON的接口,两者都是基于Spring MVC这一套技术实现的,所以暂且觉得了解一下Spring MVC原理还是有所裨益的. Spring M

keepalived简单原理及配置参数介绍_2015101601

>>>keepalived是什么? keepalive是HA(High Available)高可用集群的一种实现方案,用来防止系统架构中的单点故障.其是vrrp协议的实现. >>>vrrp协议工作简介 vrrp(Virtual Router Redundancy Protocol),即是虚拟路由冗余协议.用于实现多个路由器的高可用性.其工作原理是将一组路由器虚拟成一个虚拟路由器对外提供一个或多个IP地址.在这组路由器当中,实际对外提供IP地址的路由器被称为MASTER,

Android开发学习之路--RxAndroid之简单原理

??学习了RxAndroid,其实也就是RxJava了,但是还是不是非常清楚到底RxAndroid有什么用呢?为什么要使用RxAndroid呢?这篇文章讲得不错,RxJava的原理.但是这里还是把整个过程学习下,这里主要参考文章中的原理,再把这个过程实现了一遍,也算是一知半解了. 一般实现 ??首先来个简单的例子,选出一个班级里面,学生成绩最好的,然后保存这个学生的姓名,这里简单实现下Student的类. package com.jared.emrxandroidstudy; /** * Cre

js编译器的一些简单原理

有没有发现在写代码的时候,往往会遇到一些莫名其妙的错误,然后时间紧急不得不去网上查阅一些代码.虽然要实现的功能解决了,但是看被拷贝的代码好多真心看不懂,以后遇到诸如此类的问题,如果查阅不到这些代码的话还是不会.所以今天给大分享一下内部原理的问题 ###1.js编译器编译的几条基本原则 >a.js预编译:解释函数声明,忽略表达式: >b.运行期间获取变量会有底层向顶层依次查找,直到找到为止(华续以前已经分享过): >c.变量的定义会被提前到body下,即所属代码最前面声明: >d.f