当前位置:首页 > 日记 > 正文

使用Javascript实现简单的制表符开关

使用Javascript实现简单的制表符开关
代码很简单,很容易理解,而且没有更多的废话。

直接附上代码:

复制代码代码如下所示:

JS简单的标签
* {字体大小:14px;保证金:0px;}

一个{颜色:# a0b3d6;文字装饰:无;}

{ border: 1px solid。标签# a0b3d6;保证金:100px;宽度:350px;}

资产净值。标签{背景:# eaf0fd;线高度:30px;填充:0px 20px,0px 20px;显示:内联块;边框右:1px solid # a0b3d6;固体;

。标签导航,{背景:白色;底部边框:1px solid白色;位置:相对;}

。标签内容{显示:块;padding: 20px;边境上:1px solid # a0b3d6;边距:- 1px;}

。tabs-content_hide {显示:无;}
首页

技术

生活

作品
首页

技术

生活

作品


------demo.js--------------—

复制代码代码如下所示:

窗口。指针函数(){

制表符()

}

函数选项卡(id,触发器){

无功tabbtn = document.getelementbyid(ID)。GetElementsByTagName(H){ 0 }。getElementsByTagName();

无功tabscontent = document.getelementbyid(ID)。GetElementsByTagName(P);

对于(var i = 0;i < tabbtn.length;i++){

我tabbtn { }。指数=我;

如果(触发= = 'mouseover){

我tabbtn { }。onmouseover =函数(){

ClearClass();

这一方法= ;

showcontent(这个指数);

}

}

功能showcontent(N){

对于(var i = 0;i < tabscontent.length;i++){

我tabscontent { }。指数=我;

我tabscontent { }。类名=tabs-content_hide ;

}

tabscontent {N}。类名=标签内容;

}

功能clearclass(){

对于(var i = 0;i < tabbtn.length;i++){

tabbtn {我} classname = ;

}

}

}

}
这是容易实现的标签切换效果,可以美化自己的合作伙伴使用他们自己的项目。

相关文章

PS图象处理软件合成的大Hercules从

PS图象处理软件合成的大Hercules从

图象,处理软件,地球,电脑软件,PS,本教程介绍给朋友,使用PS图象处理软件图片合成大力神诞生于地球。教程产生的整体效果非常好。作者详细介绍了生产过程,并推荐给朋友们。 本教程介绍给朋友,使用PS图象处理软件图片合成大力神诞生于地球。本教…

确定最小跨度高度的一种方法

确定最小跨度高度的一种方法

方法,跨度,最小,高度,电脑软件,有些朋友不会很好地使用跨度标签,尤其是当他们需要定义宽度和高度时。这里有两个好的解决方案。 跨标签通常用于生成HTML页面,但有些朋友对它们不感兴趣。许多朋友似乎认为它们很好用,但使用起来也很麻烦,尤其是…

在喜马拉雅fm中收听本地文件的简单

在喜马拉雅fm中收听本地文件的简单

在喜马拉雅fm中收听本地文件的简单教程,喜马拉雅fm,收听本地文件,今天小编分享在喜马拉雅fm中收听本地文件的简单操作,还不会操作的小伙伴就和小编一起学习一下吧,下面就是具体的操作流程。在喜马拉雅fm中收听本地文件的简单教程1、其实喜马拉…

div允许div内部元素均匀分布,如单选

div允许div内部元素均匀分布,如单选

元素,单选按钮,均匀分布,电脑软件,div,网站上有多个单选按钮,以便它们可以均匀分布。这会更有趣一点。大多数在线方法都不实用。下面是一个成功的测试方法。你可以看到它。 RT,网站上有不止一个单选按钮,想让它均匀分布,大量在线搜索,终于找到…

这样的PHP使用glob函数遍历一个目

这样的PHP使用glob函数遍历一个目

函数,遍历,文件夹遍历,目录,电脑软件,本文阐述了PHP使用glob函数遍历一个目录或文件夹的方式。分享给你供你参考。具体分析如下: 当谈到PHP目录遍历我们很多朋友会认为是opendir、readdir,这样你可以遍历目录和显示文件,但在PHP中有一个更简…

ai简单地描绘了美丽的波西米亚风格

ai简单地描绘了美丽的波西米亚风格

米亚,波西,风格,简单,美丽,本教程是朋友的介绍,用ai绘制出波西米亚风情的美丽图案。这个教程的效果真的很漂亮,难度也不是很大。 本教程是一个朋友介绍的简单漂亮的波西米亚风格,采用ai模式,渲染出来的图案很漂亮,渲染也不难,推荐朋友分享学习,喜…

HTML5语法和规则概述

HTML5语法和规则概述

语法,规则,电脑软件,HTML5不区分案例和案例,省略了关闭空元素的斜杠。只要它不包含限制字符(如>或空格),就不能添加引号。 1,HTML5不是区分大小写的。 这是我的 2,HTML5省略了关闭空元素的斜杠;空元素是不嵌套内容的元素,如: 三.定语的语法规则…

关于画家背景的绘画和氛围的教程

关于画家背景的绘画和氛围的教程

教程,画家,氛围,背景,电脑软件,本教程是介绍画家背景的绘画和氛围。教程仍然是插图的王子。教程很实用,我推荐给大家。希望你能喜欢。 本教程介绍绘画和创造气氛的画家背景,导师仍然是开放的技巧教程说明的王子,很实用,对gxiaoman份额成员非常…

动态制作教程

动态制作教程

动态,制作教程,电脑软件,下面是使用ps做GIF动态图片的最基本的方法。用最简单的例子,让初学者快速入门,简单地找到一些复杂的例子来做,再做一些,相信你能理解原理。 这里的萧边与你分享PS GIF动态图片制作图文教程,其实这个原理也很简单,就是在不…

PS图象处理软件不能打开和PS无法完

PS图象处理软件不能打开和PS无法完

解决方案,请求,图象,处理软件,电脑软件,PS opens pictures to perform picture processing, but what if you can't open a picture if you meet Photoshop然后让我们学习ps如何完成请求解决方案。 PS图象处理软件不能打开图片和PS无法完…