html制作顶部选项卡,html: 原生javascript实现选项卡
前言
我觉得html中一个比较实用的功能就是选项卡,选择哪一个就显示对应的内容,感觉挺舒适的。用在页面布局上也是不错的选择。
那么选项卡到底是什么的样呢?下面我们来直观的看一下,如下图所示就是一个简单的选项卡,共有四个选项,选择哪一个选项就对应地显示相应的内容,如下截图所示:
那么对于这样的选项卡功能如何实现呢?用原生的javascript就可以实现的,而且实现起来也不难,主要记住三个要点,第一个要点是排他思想,要用原生的javascript实现选项卡,就是通过排他思想的理念来实现的,所以这个思想很重要,在这里具体一点说就是把选项分成两种状态,一种是选中的状态,另一种是没有选中的状态;还有两个要点其实是实现排他思想的技术关键,一个是双重for循环,另外一个是自定义属性。下面来看一下具体如何实现吧,具体代码如下:
选项卡练习
body,ul,li{margin: 0;padding: 0;font:12px/1.5 arial;/* 字体12像素 行高 1.5em 字体 Arial */ }
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#hlist{height:40px; width:500px; border:1px solid #ccc;border-bottom: none}
#hlist li{float:left; width:125px; line-height:40px; text-align:center; background:#d7d7d7; cursor:pointer}
#hlist .selected{border-bottom:none; background:#fff;}
#cdivs{width:500px; border:1px solid #ccc; border-top:none; text-align:center; line-height:200px;}
window.οnlοad=function(){
var hlist = document.getElementById('hlist').getElementsByTagName('li');
var cdivs =document.getElementById('cdivs').getElementsByTagName('div');
for(var i=0;i
hlist[i].index=i;
hlist[i].οnclick=function(){
for(var i=0;i
hlist[i].className='';
cdivs[i].className='hide';
}
this.className='selected';
cdivs[this.index].className='';
}
}
}
- 选项一
- 选项二
- 选项三
- 选项四
上面的代码就是实现了如下截图所示的选项卡功能,其中将菜单和内容框绑定,然后通过上面说的三个要点,一个中心思想,两个技术要点来实现选项功能,最终到达点击菜单选项显示对应内容的效果。最终效果如下所示:
最后
emm,整体效果实现了,我这里设置的是单击鼠标切换选项卡,如果你想鼠标移入就切换选项直接将“onclick”替换为“onmouseover”就可以实现了。今天就分享到这里了。
html制作顶部选项卡,html: 原生javascript实现选项卡相关推荐
- 原生JavaScript实现选项卡
原生JavaScript实现选项卡 一, HTML代码 <div id="tabs"><ul><li class="on"> ...
- 用html制作一个音乐排行榜,使用原生JavaScript制作一个漂亮的音乐播放器
简单介绍 起初在简书上发现了这篇博客--[html.css.jq]制作一个简洁的音乐播放器.这是一个用jQuery库实现的音乐播放器,界面简约大气. 我在这个基础上,反其道而行,使用原生JavaScr ...
- JavaScript原生代码编写选项卡Tab页跳转功能
本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能. 一.先来看看效果图 二.准备文字素材 文字素材选择诗经里面的三首古诗,分别是关雎.蒹葭和采薇 <关雎> 关关 ...
- php拼图游戏开发,原生javascript制作的拼图游戏实现方法详解
本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置 计算背景图位置 //1.让 ...
- 《原生javascript制作各种酷炫组件》专栏介绍
本专栏主要是用原生javascript和css来编写一些炫酷的效果,用原生写是为了读者能把代码放到任何框架当中,代码没有做封装,瀑布式的代码理解起来容易,也容易修改以便达到自己想要的效果,适合初级学者 ...
- animate用法 js原生_用 原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
- mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
- Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
- 加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
最新文章
- keras终止训练后显存不释放_Keras实现Large-scale Bisample Learning on ID vs. Spot Face Recognition...
- Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel
- NIO详解(七):进程间通信(MappedByteBuffer)
- STL源码剖析读书笔记--第6章第7章--算法与仿函数
- 一篇文章搞定,SpringBoot 创建定时任务
- CSS中的a标签几个访问状态记录
- 代码python文艺的_Python小解
- Google Duo采用WaveNetEQ填补语音间隙
- 标准差、方差、协方差的区别
- 【转】.NET Core 可移植类库PCL Portable Class Library详解
- 荷兰国旗问题(分三块)
- 我的webpack路
- 树莓派boot分区cmdline.txt
- 如何利用开源风控系统 TH-Nubula(星云)防止撞库?
- 2019年第五届计蒜之道复赛总结
- Spring、SpringMVC、MyBatis整合
- 拓端tecdat|R语言对二分连续变量进行逻辑回归数据分析
- stata中计算公式命令_Stata:runby - 一切皆可分组计算!
- delphi代码在linux编译运行,[教程] Delphi 10.2 Linux 程序开发环境部署的基本步骤
- 7、osg中响应键盘鼠标事件以及鼠标和键盘编码表
热门文章
- Learn from mistake, i.e. 和 e.g. 是不同的
- Varnish页面缓存服务
- spring定时任务重复执行2次问题的解决
- VUE -- 自定义控件(标签)
- 【译】用Fragment创建动态的界面布局(附Android示例代码)
- iOS开发③UIView
- Zigbee通讯漫谈(初次见面)
- linux grep 显示多行信息
- linux 配置计算机和用户免密在本地计算机执行远程命令 hosts.equiv $HOME/.rhosts 简介
- 谷歌浏览器翻译插件 Linkclump:一次性打开多个链接