JavaScript中选项卡的几种写法

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量205 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yu412/p/11454419.html
版权

效果图：

 

 

 

1.基本写法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li{
list-style: none;
}
ul{
width: 300px;
height: 40px;
background: #ccc;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}
li{
width: 33%;
text-align: center;
line-height: 40px;
}
li.active{
background: red;
}
.box{
width: 298px;
height: 200px;
border: 1px solid red;
}
.box p {
height: 200px;
display: none;
margin: 0;
}
.box p.active{
display: block;
}
.box p:nth-child(1){
background: yellowgreen;
}
.box p:nth-child(2){
background: indianred;
}
.box p:nth-child(3){
background:mediumturquoise;
}


</style>
</head>
<body>
<div>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box">
<p class="active">1111111111111111111111111111111</p>
<p>2222222222222222222222222222222</p>
<p>3333333333333333333333333333333</p>
</div>
</div>
</body>
<script>
var ol=document.querySelectorAll("li");
var op=document.querySelectorAll("p");
for(var i=0;i<ol.length;i++){
ol[i].index=i;
ol[i].οnclick=function(){
for(var j=0;j<ol.length;j++){
ol[j].className="";
op[j].style.display="none";

}
this.className="active";
op[this.index].style.display="block"
}
}


</script>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.面向对象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li{
list-style: none;
}
ul{
width: 300px;
height: 40px;
background: #ccc;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}
li{
width: 33%;
text-align: center;
line-height: 40px;
}
li.active{
background: red;
}
.box{
width: 298px;
height: 200px;
border: 1px solid red;
}
.box p {
height: 200px;
display: none;
margin: 0;
}
.box p.active{
display: block;
}
.box p:nth-child(1){
background: yellowgreen;
}
.box p:nth-child(2){
background: indianred;
}
.box p:nth-child(3){
background:mediumturquoise;
}


</style>
</head>
<body>
<div>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box">
<p class="active">1111111111111111111111111111111</p>
<p>2222222222222222222222222222222</p>
<p>3333333333333333333333333333333</p>
</div>
</div>
</body>
<script>
 
//选项卡：点击对应按钮的时候，切换对应的内容
// 1.选元素
// 2.绑定事件
// 3.找点击的元素的索引
// 4.根据索引，显示内容
function Tab(){
this.li=document.querySelectorAll("li");
this.p=document.querySelectorAll("p");
this.init();
}
Tab.prototype.init=function(){
var that=this;
for(var i=0;i<this.li.length;i++){
this.li[i].index=i;
this.li[i].οnclick=function(){
that.abc=this.index;
that.display();
}

}
}
Tab.prototype.display=function(){
for(var i=0;i<this.li.length;i++){
this.li[i].className="";
this.p[i].className="";
}
this.li[this.abc].className="active";
this.p[this.abc].className="active";

}
new Tab();

</script>
</html>

 

 

 

 

转载于:https://www.cnblogs.com/yu412/p/11454419.html

Laky1943
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现简单选项卡制作
11-19
本文实例为大家分享了js实现简单选项卡制作代码，供大家参考，具体内容如下 实现功能 通过点击按钮查看相应的介绍； 按钮相应的变色； 内容相应的切换； html 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡</title> <link rel="stylesheet" href="./css/style.css" > </head> <bo
选项卡，JS应用写法思路。
Can1997的博客
04-04 174
实现功能：鼠标移动到某标题，显示相应的内容。 CSS样式部分此处忽略。 HTML部分： 重要思路 : 鼠标移入到哪个元素里面，哪个按钮元素就添加active同时清除其余按钮的active类名。 使用this标记触发事件的元素。 利用伪数组之中的下标找到对应内容。 知识点 1、QS选择器：document.querySelectorAll(); 选择所有相同类名的标签。 2...
如何用js写选项卡
huigeek的专栏
10-17 1272
学js的时候，一个必须要会写的程序就是知道如何写选项卡。例如我们打开一个新浪新闻网站，里面会划分很多块，一个块里面会根据不同的内容划分不同的类别。我们经常要做的是当用户点击某一类别名称时下面出现此类别的新闻信息。 我们在开始之前要知道用js做选项卡的大致思路： 我们做一个简单的选项卡，实现的效果是下面
如何用js写一个简易选项卡
Shsgear的博客
10-26 2189
如何用js写一个简易选项卡
原生js写一个选项卡
wan845199324的博客
06-29 1538
html代码： <h2 class="active">选项卡1</h2> <h2>选项卡2</h2> <h2>选项卡3</h2> <div style="display:block;background-color:hotpink;">内容1</div> <div style="background-color:darkkh
基于JavaScript实现选项卡效果
01-21
一个简单的选项卡的关键在于：当切换页面时，如何让所选的选项和与其对应的内容同时出现，并且在选择其他的内容时，不影响新的内容的显示。 其中用到两个很关键的思想： 1.为对象增加index属性，并通过this对...
JavaScript tab选项卡插件实例代码
01-19
今天，先从最简单的开始，将已有的一个Tab选项卡切换功能改写成javascript插件形式。 原生函数写法 将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面 我们先来看看最原始的使用...
JavaScript实现Tab选项卡切换
12-28
本文实例为大家分享了js实现选项卡切换的具体代码，供大家参考，具体内容如下 会用到原生js的dom操作 html <body> <li class=seclect>1 <li>2 <li>3 <li>4 <li>5 <li>1 <l
JavaScript插件Tab选项卡效果
11-27
闲来无事，研究了一下JavaScript插件的写法，今天就将自己写的一个小插件记录下来。 本文介绍了此款插件的基本用法，实现的功能以及代码。 首先，来看看最终效果： 这是一款普通的Tab选项卡插件，下面来讲讲它...
基于javascript实现tab选项卡切换特效调试笔记
10-22
主要介绍了基于javascript实现tab选项卡切换特效调试笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现tabs选项卡切换效果(自写原生js)
12-01
现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。 效果图如下：  html代码： 代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>js-tabs</title> <link rel=”stylesheet” type=”text/css” href=”css/base.css” media=”all”/> <style type=”text/css”
网页选项卡（简洁写法）
zhumengstyle的博客
08-02 4548
在一本书中，发现了一个关于选项卡的简洁思路（只需三行代码），分享一下： //css部分.li_ys li{ display:inline-block; float:left; text-align:center; line-height:30px; font-size:1em; font-wei
web前端选项卡的写法
leixu1027的博客
08-12 2615
tab选项卡的一种写法 css:             input{             background: white;         }         .active{             background: yellow;         }         div{             width: 100px;             h
选项卡的编写
weixin_44547775的博客
05-27 205
《选项卡的编写》 开发工具与关键技术：Visual Studio /SQL数据库 作者：肖春庆 撰写时间：2019年05月23日 在我们使用软件或者访问网站的过程当中，会应用到多种动态的页面切换。一般会使用选项卡，来实现页面切换。它与页面跳转的本质有所不同。选项卡在自身页面上不变的情况下实现内容的切换。而不是页面与页面之间的变换跳转。在页面的一块区域里规划一个视图编写出选项卡一开始的状态。注意要编...
用js写一个选项卡
bogum_fan的博客
07-27 375
.box{ width:300px; height:300px; background-color:#eee; padding:10px; } ul{overflow:hidden; padding-left:0;} ul li{     list-style:none;     float:left;     padding: 10px 15px;     
快速入门——如何用JS写网页中常见的选项卡~
weixin_44021199的博客
12-10 311
教你如何运用JS写选项卡~ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&quo
使用JS实现简单的选项卡功能
ikEason_的博客
05-20 283
首先我们来写HTML代码，构建出整体结构 <!DOCTYPE html> <div id="news"> <ul class="clearfix"> <li class="active"><a href="">国内</a></li> <li><a href="">国际</a></li> <li><a href="">财金&l
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 847
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 899
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
JavaScript选项卡
05-24
JavaScript 选项卡可以帮助用户在一个页面上显示多个内容，而不必加载多个页面。下面是一个简单的实现： ```html <!DOCTYPE html> <title>JavaScript选项卡 .tab { display: none; } <li><a ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值