html实现点击切换页面,JavaScript实现的简单Tab点击切换功能示例

本文实例讲述了JavaScript实现的简单Tab点击切换功能。分享给大家供大家参考，具体如下：

www.jb51.net tab点击切换

padding: 0;

margin: 0;

}

#example{

width: 500px;

height: 400px;

margin: 0 auto;

}

#example .hd ul li{

display: inline-block;

width: 32%;

height: 36px;

line-height: 36px;

border-radius: 5px;

background-color: #333;

text-align: center;

color: #fff;

}

#example .hd ul li.current{

background-color: green;

}

#example .bd{

border: 1px solid #ccc;

border-radius: 5px;

}

#example .bd ul li{

display: none;

}

#example .bd ul li.current{

display: block;

}

Beijing
Shanghai
Guangzhou

This is Beijing!
This is Shanghai
This is Guangzhou

var hd = document.getElementsByClassName("hd")[0].getElementsByTagName("li");

var bd = document.getElementsByClassName("bd")[0].getElementsByTagName("li");

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

hd[i].onclick = function(){

doTabs(this);

}

function doTabs(obj){

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

if(hd[i]==obj){

hd[i].className = "current";

bd[i].className = "current";

}else{

hd[i].className = "";

bd[i].className = "";

}

使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

希望本文所述对大家JavaScript程序设计有所帮助。

html实现点击切换页面,JavaScript实现的简单Tab点击切换功能示例相关推荐

Cypress之处理页面弹框以及多tab页间切换
上次博客讲解了如何模拟键盘输入和鼠标操作以及拖动页面元素,此次课程将介绍如何处理页面弹框,保证测试案例继续运行.另外,还会介绍如果测试案例跨多个tab页,如何实现多tab页间切换测试.最后介绍cypr ...
html5实现下拉刷新页面,原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
点击链接跳转到新页面并显示对应的tab标签页切换
原理:从页面A跳转到页面B,则在A页面中跳转页面时传值,然后在B页面中写js获取该值并做对应的操作附:tab标签页的制作链接:https://mp.csdn.net/postedit/1010531 ...
php tab标签,JavaScript代码分享：tab标签的切换
本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风 ...
vue 切换页面没有改变滚动条_VUE建立照片轮播功能
在项目中需要展示一个景点的多张照片,先以缩略图在上面一排进行显示,下面显示选中的大图,上面一次显示5张,多余5张的可以用两边箭头按钮或触摸屏上的滑动划换,最终实现的效果如下图. 刚开始准备以eleme ...
html点击鼠标页面出现爱心,js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下鼠标点击特效 html { cursor: pointer; } h3 { text-align: center; us ...
使用Tab键控制切换网页光标位置
使用tabIndex属性可以很方便的控制光标位置,具体用法 <element tabindex="number"> 其中的数字: 1 ~ 32767( 2的15次方减1 ...
iframe的属性及其简单使用（点击标签切换页面）
iframe的相关属性详细内容参考:HTML <iframe> 标签属性值描述 align left right top middle bottom 不赞成使用.请使用样式代替. ...
设计点击左侧切换页面进出_Axure教程：（初级）导航中的页面切换
本文给大家讲讲如何利用Axure进行导航中的页面切换,一起来看看~ 一.页面布局 (1)从左侧元件库拉入两个矩形作为导航按钮,分别命名为:页面1.页面2. (2)从左侧元件库拉入一个动态面板作为页面内 ...
android ViewPager 实现点击小圆点切换页面案例
android ViewPager 实现点击小圆点切换页面说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...

html实现点击切换页面,JavaScript实现的简单Tab点击切换功能示例

html实现点击切换页面,JavaScript实现的简单Tab点击切换功能示例相关推荐

最新文章

热门文章