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

<!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. beego注解路由 [自定义方法]

    背景: beego生成的controller里面,默认get请求到由Get()方法处理:post请求由Post()方法处理 etc. 如果想自定义方法来处理请求,改怎么做? 直接拿beego的文档来说 ...

  2. ubuntu 安装oracle客户端

    from: http://webikon.com/cases/installing-oracle-sql-plus-client-on-ubuntu Installing Oracle SQL*Plu ...

  3. Easy-to-Learn English Travel Phrases and Vocabulary!

    Easy-to-Learn English Travel Phrases and Vocabulary! Share Tweet Share Tagged With: Real Life Englis ...

  4. How to Pronounce the Days of the Week

    How to Pronounce the Days of the Week Share Tweet Share Vocabulary study:  how to pronounce the days ...

  5. zabbix简易安装指南

    1.php版本为5.5.37 mysql版本为5.5 nginx使用的是tengine2.2.1 2.系统为centos 7.2 最小化安装 3.使用阿里云的epel扩展源 4.首先安装依赖 yum ...

  6. LeetCode OJ 143. Reorder List(两种方法,快慢指针,堆栈)

    Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do thi ...

  7. 118/119. Pascal's Triangle/II

    原文题目: 118. Pascal's Triangle 119. Pascal's Triangle II 读题: 杨辉三角问题 '''118''' class Solution(object): ...

  8. 8.mysql-基础.md

    目录 数据库管理 查看当前软件中的数据库 工具 创建数据库 删除数据 查看字符集 修改数据库 表管理 进入数据库 查看表 创建表 查看表结构 删除表 修改表 添加字段 删除字段 修改字段名称 修改字段 ...

  9. 关于三层(dao,serviece,servlet)

    在登陆校验中, dao:返回的是resultset 对象,就是  ps.executeQuery(需要强化的是jdbc的具体的流程) 其中的数据库连接时可以自己写 可以通过工厂类 可以通过数据库的连接 ...

  10. C++ CBitmap,HBitmap,Bitmap区别及联系

    加载一位图,可以使用LoadImage: HANDLE LoadImage(HINSTANCE hinst,LPCTSTR lpszName,UINT uType,int cxDesired,int ...