实现一个简单的选项卡功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>一个选项卡</title>

    <style type = "text/css">

        *{

            padding:0;

            margin:0;

        }

        #main {

            width:600px;

            height:300px;

            background:white;

            border:2px solid red;

            position:relative;

            margin:50px auto;

        }

        ul {

            height:49px;

            background:grey;

            font-size:30px;

            line-height:49px;

            color:red;

            list-style-type:none;

            border-bottom:1px dotted grey;

        }

        li {

            width:200px;

            float:left;

            text-align:center;

        }

        li#active{

            background:white;

        }

        p {

            font-size:40px;

            text-align:center;

        }

        .content>div {

            display:none;

        }

        .content>div#play {

            display:block;

            height:250px;

            background:red;

        }

    </style>

</head>

<body>

    <div id = "main">

        <ul class = "lis">

            <li id="active">电影</li>

            <li>娱乐</li>

            <li>数码</li>

        </ul>

        <div class = "content">

            <div id = "play" class="action">

                <p>

                    this is a movie

                </p>

            </div>

            <div class="action">

                <p>

                    this is about entertainment

                </p>

            </div>

            <div class="action">

                <p>

                    this is about digital product

                </p>

            </div>

        </div>

    </div>

</body>

    <script type = 'text/javascript'>

        var lis = document.getElementsByTagName("li");

        var con = document.getElementsByClassName("action");

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

            lis[i].index = i;

            lis[i].onclick = function(){

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

                lis[j].id = "";

                con[j].id = "";

            }

                this.id = "active";

                con[this.index].id = "play"

            }

        }

    </script>

</html>

javascript简单的选项卡的更多相关文章

  1. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  2. 【Css】一个简单的选项卡

    这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...

  3. Jquery简单的选项卡实现

    概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  5. JavaScript简单入门(补充篇)

    本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...

  6. 《javascript高级程序设计》读书笔记（一）javascript简单介绍

    第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...

  7. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  8. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  9. 三行Jquery代码实现简单的选项卡

    今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...

随机推荐

  1. 解决Run As -> Java Application不能运行问题

    转自:https://breakshell.iteye.com/blog/467130 点 Run As -> Java Application 不能运行,报的错误如下: Plug-in org ...

  2. SRM-供应商关系管理-组织模式

    https://wiki.scn.sap.com/wiki/display/SRM/PPOMA_BBP 供应商关系管理 ... 组织模式 PPOMA_BBP     跳到元数据结束   由Ivy Li ...

  3. XML中的变量传值

    在action的java类中定义变量之后,在XML中获取该变量进行对应传值:: 在指定方法中获取XML配置文件的变量传值::

  4. kafka无法消费数据

    遇到一个问题,使用Python kafka客户端和kafka命令行都无法消费数据,但是在kafka命令行后面添加--partition 0后就可以消费数据. bin/kafka-console-con ...

  5. oracle中去掉回车换行空格的方法详解

    函数: 1.translate语法:TRANSLATE(char, from, to)用法:返回将出现在from中的每个字符替换为to中的相应字符以后的字符串.            若from比to ...

  6. intellij idea远程debug调试resin4教程

    昨天有个项目部署在阿里云 想远程调试不知道怎么弄.看日志需要账户密码很不方便呀.今天加班特意baidu了下. 1.先在远程的resin修改conf中resin.xml配置文件 在server-defa ...

  7. 关于maven中的快照版本（snapshot）与正式版本（release）解析。

    Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...

  8. React之使用Context跨组件树传递数据

    ---------------------------------  讲解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480 ...

  9. python玩丢手绢问题，出局的顺序

    # 丢手绢问题# 游戏规则: 有N个小朋友玩丢手绢游戏,做成一圈,从第一个小朋友开始数数,从一开始数,数到指定数字的小朋友要出列,然后下一个小朋友继续从1开始数,依次类推,算出最后一个留下来的小朋友是 ...

  10. 为什么虚拟DOM更优胜一筹

    注意: 虚拟DOM只是实现MVVM的一种方案,或者说是视图更新的一种策略.没有虚拟DOM比MVVM更好一说. 我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自 ...