原生js选项卡
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- *{
- padding:0;
- margin:0;
- }
- .tab{
- width: 300px;
- height: 300px;
- border:1px solid #333;
- margin:50px auto;
- }
- .tab .hd{
- height:40px;
- line-height: 39px;
- text-align: center;
- overflow: hidden;
- }
- .tab .hd span{
- float: left;
- width: 99px;
- height:39px;
- border-left:1px solid #333;
- border-bottom:1px solid #333;
- }
- .tab .hd span:first-child{
- width: 100px;
- border-left: none;
- }
- .tab .hd span.cur{
- background-color: lightblue;
- border-bottom: none;
- font-weight: bold;
- }
- .tab .bd{
- overflow: hidden;
- }
- .tab .bd div{
- width: 100%;
- height: 260px;
- display: none;
- }
- .tab .bd div.cur{
- display: block;
- }
- </style>
- </head>
- <body>
- <div class="tab">
- <div class="hd" id="hd">
- <span class="cur">新闻</span>
- <span>体育</span>
- <span>时尚</span>
- </div>
- <div class="bd" id="bd">
- <div class="cur">新闻</div>
- <div>体育</div>
- <div>时尚</div>
- </div>
- </div>
- <script type="text/javascript">
- // 获取元素
- var spans = document.getElementById("hd").getElementsByTagName("span");
- var divs = document.getElementById("bd").getElementsByTagName("div");
- // 批量给span添加鼠标进入事件
- for(var i = 0 ; i < spans.length ; i ++){
- // 将i保存在index属性中
- spans[i].index = i;
- spans[i].onmouseenter = function(){
- // 所有的span恢复原状
- for(var j = 0 ; j < spans.length ; j ++){
- spans[j].className = "";
- }
- // 特殊的那个span加cur。
- this.className = "cur";
- // div对应和排他
- // 所有div恢复原状
- for(var k = 0 ; k < divs.length ; k ++){
- divs[k].className = "";
- }
- // 对应的div加cur
- divs[this.index].className = "cur";
- };
- }
- </script>
- </body>
- </html>
原生js选项卡的更多相关文章
- 原生JS 选项卡代码实现
可实现同页面多个选项卡 效果图: 代码实现: HTML部分 <div class="main" id="tabs"> <div class=& ...
- 原生js简易日历效果实现
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- 原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图: 好了,下边 ...
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js面向对象编程-选项卡(点击)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js实现tab选项卡
1.html部分 <body> <div id="tab"> <div class="tab_menu& ...
- 使用原生js实现选项卡功能实例教程
选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...
随机推荐
- linux 安装tensorflow(gpu版本)
一.安装cuda 具体安装过程见我的另一篇博客,ubuntu16.04下安装配置深度学习环境 二.安装tensorflow 1.具体安装过程官网其实写的比较详细,总结一下的话可以分为两种:安装rele ...
- Uva 01124, POJ 3062 Celebrity jeopardy
It's hard to construct a problem that's so easy that everyone will get it, yet still difficult enoug ...
- Caused by: java.net.SocketException: Broken pipe
异常信息 时间:2017-03-24 17:22:16,719 - 级别:[ WARN] - 消息: [other] The web application [ROOT] appears to hav ...
- laravel基本信息
1.Bundle是Laravel的扩展包组织形式或称呼.Laravel的扩展包仓库已经相当成熟了,可以很容易的帮你把扩展包(bundle)安装到你的应用中.你可以选择下载一个扩展包(bundle)然后 ...
- 【java】ArrayList、Iterator用法
package com.tn.collect; import java.util.ArrayList; import java.util.Iterator; class Product{ public ...
- 谷歌浏览器插件-jsonView插件安装与使用
本文转载:http://www.bubuko.com/infodetail-700647.html 1 安装 1.打开 https://github.com : 2.搜索 jsonView 链接:ht ...
- linux集群批量执行命令
因为工作需要,需要修改集群中机器的配置,一台一台的修改太浪费时间,就想能不能通过自动化脚本批量执行命令,尝试写一个,自己shell不熟悉,写的有点渣渣 if [ "$#" -ne ...
- Search an Element in an array
Given an integer array and an element x, find if element is present in array or not. If element is p ...
- JAVA NIO学习三:NIO 的非阻塞式网络通信
紧接着上一章,我们继续来研究NIO,上一章中我们讲了NIO 中最常见的操作即文件通道的操作,但实际上NIO的主要用途还是在于网络通信,那么这个时候就会涉及到选择器,这一章我们就会对其进行讲解操作. 一 ...
- Python核心编程--浅拷贝与深拷贝
一.问题引出浅拷贝 首先看下面代码的执行情况: a = [1, 2, 3] print('a = %s' % a) # a = [1, 2, 3] b = a print('b = %s' % b) ...