一个页面中出现多个tab标签，js方法

最新推荐文章于 2024-07-05 16:14:04 发布
最新推荐文章于 2024-07-05 16:14:04 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19463235/article/details/41982249
版权
html 同时被 2 个专栏收录
40 篇文章 0 订阅
订阅专栏
js
6 篇文章 0 订阅
订阅专栏 
<span style="font-size:18px;color:#6666CC;">
<span style="font-size:32px;"><span style="background-color: rgb(255, 0, 0);"><span style="color:#FFFF33;"><strong>方法一</strong></span></span></span>
未写样式 ，但是出来基本的框架，如此写就可以了。看标红的地方就是需注意修改的地方，其他地方，结构大致相同就可以了。
切记，必不可少的为ul，li在两个div中都必须出现。</span>
这是方法一。，还有方法二

<script>

function setTab(m,n){
 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
 for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
 }
}

</script>


        <ul id="<strong><span style="color:#FF0000;">menu1</span></strong>" class="menu">
            <li class="hover" οnmοuseοver="<strong><span style="color:#FF0000;">setTab(1,0)</span></strong>">初一</li>
            <li οnmοuseοver="<strong><span style="color:#FF0000;">setTab(1,1)</span></strong>">初二</li>
        </ul>
      <div class="tabs_content">
          <div id="<strong><span style="color:#FF0000;">main1</span></strong>" class="content">
             <ul class="block"><li>初一某同学得了奖学金</li></ul>
             <ul><li>初二某同学得了奖学金</li></ul>
          </div>
      </div>



        <ul id="<strong><span style="color:#FF0000;">menu2</span></strong>" class="menu">
            <li class="hover" οnmοuseοver="<strong><span style="color:#FF0000;">setTab(2,0</span></strong>)">新闻社</li>
            <li οnmοuseοver="<strong><span style="color:#FF0000;">setTab(2,1)</span></strong>">瑜伽社</li>
        </ul>
    <div class="tabs_content">
        <div id="<strong><span style="color:#FF0000;">main2</span></strong>" class="content">
            <ul class="block"><li>新闻社现在招新成员，欢迎大家踊跃报名</li></ul>
            <ul><li>瑜伽社上周在全市瑜伽比赛中荣获第一的好成绩</li></ul>
        </div>
    </div>

        <ul id="<strong><span style="color:#FF0000;">menu3</span></strong>" class="menu">
            <li class="hover" οnmοuseοver="<strong><span style="color:#FF0000;">setTab(3,0)</span></strong>">幼儿专区</li>
            <li οnmοuseοver="<strong><span style="color:#FF0000;">setTab(3,1)</span></strong>">小学生专区</li>
        </ul>

    <div class="tabs_content">
        <div id="<strong><span style="color:#FF0000;">main3</span></strong>" class="content">
            <ul class="block"><li>现在是换季的时节，各位家长应注意</li></ul>
            <ul><li>市里组织小学六年级统考，来摸底，为明年升学做准备</li></ul>
        </div>
    </div>


<span style="font-size:18px;color:#6666CC;"><span style="font-size:32px;"><span style="background-color: rgb(255, 0, 0);"><span style="color:#FFFF33;"><strong>方法一</strong></span></span></span></span>


<script>


 function setTad(name,cursel,n){
     for(i=1;i<=2;i++)
    {
        var oMenu = document.getElementById(name+i);
        var oCon = document.getElementById('con_'+name+'_'+i);
        oMenu.className = i==cursel?'hover':'';
        oCon.className =i==cursel?'current':'undis'
    }
 }

</script>

     
<div class="content_three_right f_left">
                <div class="news" id="">
                    <h2>
                        <a href="#" id="<strong><span style="color:#FF0000;">news1</span></strong>" class="hover" οnmοuseοver="<strong><span style="color:#FF0000;">setTad('news',1,2)</span></strong>">学区房</a>
                        <a href="#" id="<strong><span style="color:#FF0000;">news2</span></strong>" οnmοuseοver="<strong><span style="color:#CC0000;">setTad('news',2,2)</span></strong>">推优</a>
                    </h2>
                </div>  
                <div class="newscon" id="main4">
                    <div id="<strong><span style="color:#FF0000;">con_news_1</span></strong>" class="current">
                        <div class="l6_kecontent fl">
                            <ul>
                                <li>2014年中考真1111统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>   
                            </ul>
                        </div>

                    </div>
                    <div id="<strong><span style="color:#FF0000;">con_news_2</span></strong>" class="undis">
                        <div class="l6_kecontent fl">
                            <ul>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>   
                            </ul>
                        </div>
                    </div>
                </div>    




<pre name="code" class="html"><div class="content_three_right f_left">
                <div class="news" id="">
                    <h2>
                        <a href="#" id="<strong><span style="color:#FF0000;">newss1</span></strong>" class="hover" οnmοuseοver="<strong><span style="color:#FF0000;">setTad('newss',1,2)</span></strong>">学区房</a>
                        <a href="#" id="<strong><span style="color:#FF0000;">newss2</span></strong>" οnmοuseοver="<strong><span style="color:#CC0000;">setTad('newss',2,2)</span></strong>">推优</a>
                    </h2>
                </div>  
                <div class="newscon" id="main4">
                    <div id="<strong><span style="color:#FF0000;">con_newss_1</span></strong>" class="current">
                        <div class="l6_kecontent fl">
                            <ul>
                                <li>2014年中考真1111统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>   
                            </ul>
                        </div>

                    </div>
                    <div id="<strong><span style="color:#FF0000;">con_newss_2</span></strong>" class="undis">
                        <div class="l6_kecontent fl">
                            <ul>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>   
                            </ul>
                        </div>
                    </div>
                </div>  
 

 


                

        

        

    




    

      

        

            

              
                
                  彼岸花开开彼岸
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
标签(Tabs)实现多页面切换

				
			

			

				

					10-30
				

			

		

		

			
				
用js实现的多页面切换功能，应用到ajax，动态加载所需要的页面及所传递参数，有滚动条，很好的东西哦因为用到ajax，需要在server下才能看到正常加载状态

			
		

	



                

              
                



	

		

			

				
					
一个页面显示多组Tab菜单  

				
			

			

				

					sunsnow_swift的专栏
				

				

					12-06
					
					1422
					
				

			

		

		

			
				
#zgkyy {	width: 500px;	padding-top: 5px;	padding-right: 20px;	padding-bottom: 5px;	padding-left: 10px;	float: left;	color: #02700A;}/*利用padding:20px 20px 0 0来固定菜单位置*/#zgk

			
		

	



                


  
              

                


	

		

			

				
					
在 Tkinter 中实现多个标签页（tab）菜单

					
最新发布

				
			

			

				

					huangkai42的博客
				

				

					07-05
					
					377
					
				

			

		

		

			
				
在 Tkinter 中实现多个标签页（tab）菜单，并且能够通过单击标签切换不同的界面，可以借助 Notebook 控件来实现。添加标签页：使用 notebook.add(tab1, text='标签页 1') 将每个标签页添加到 Notebook 中，并指定标签页的标题。创建 Notebook 控件：使用 ttk.Notebook(root) 创建一个 Notebook 控件，它将包含多个标签页。标签页内容：在每个标签页中添加了一个简单的 Label 控件，显示不同的文本内容。

			
		

	





	

		

			

				
					
企业级多 Tab 页需求，50 行代码就搞定！

				
			

			

				

					祈澈菇凉
				

				

					07-31
					
					697
					
				

			

		

		

			
				
Umi@4、Ant Design Pro、多 Tabs 布局、状态保持、50 行代码、这些关键词能组合出一篇你感兴趣的文章吗？本文来自 @聪小陈 投稿，他是 umi 的核心开发人员，github 地址是：https://github.com/xiaohuoni缘由在 Umi 社区的四年多，很多交流都是在聊天窗口中进行的，并没有留下太多有价值的内容，虽然我尽量整理了部分内容...

			
		

	



		

			
		



	

		

			

				
					
在javascript环境实现web多标签页

				
			

			

				

					Byte Madman
				

				

					01-02
					
					932
					
				

			

		

		

			
				
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。本例一共有1个主页面，6个标签页面，1个js脚本文件，1个CSS层叠式样式表文件。来实现多标签页功能，当选择某一个标签时，显示不同的标签页文件。这6个标签页文件可以一样，也可以稍作改动，方便测试页面的变化。

			
		

	





	

		

			

				
					
js利用tab键切换当前页面_tab切换js代码 一个页面可多处使用

				
			

			

				

					weixin_39657300的博客
				

				

					12-20
					
					316
					
				

			

		

		

			
				
最近在给一个客户做一个zblog模板的时候需要用到一个页面中多处使用tab切换特效，做完后把代码整理了下，如果你也正好有此需求，直接复制代码即可。tab切换js代码 一个页面可多处使用--js代码部分：varfgm={$:function(id){returntypeofid==="object"?id:document.getElementById(id);},$$:...

			
		

	





	

		

			

				
					
多个标签页面打开代码.rar_fooduhr_tallgep_多个标签页面打开代码

				
			

			

				

					09-21
				

			

		

		

			
				
在IT行业中，尤其是在Web开发领域，创建一个支持多个标签页面打开的应用或功能是常见的需求。这个"多个标签页面打开代码.rar"文件似乎提供了一个解决方案，特别适用于fooduhr和tallgep项目。该资源利用jQuery库来...

			
		

	





	

		

			

				
					
jQuery Bootstrap打开多个标签页面代码

				
			

			

				

					06-09
				

			

		

		

			
				
"jQuery Bootstrap打开多个标签页面代码"是一个利用这两个工具实现的特定功能，它允许用户在一个应用中打开并切换多个页面，就像在浏览器中使用标签页一样。这个功能对于提供多页面浏览体验的网站或者应用来说非常...

			
		

	





	

		

			

				
					
jq多个选项卡标签切换代码.zip

				
			

			

				

					07-11
				

			

		

		

			
				
本压缩包中的“jq多个选项卡标签切换代码”提供了使用 jQuery 创建多组选项卡的示例代码，旨在帮助开发者理解和应用这种交互式设计。  在jQuery中实现选项卡切换主要涉及以下步骤：  1. **HTML结构**：首先，我们...

			
		

	





	

		

			

				
					
js实现的tab标签切换效果代码分享

				
			

			

				

					11-23
				

			

		

		

			
				
这里我们介绍一个基于纯JavaScript实现的Tab标签切换效果，无需依赖jQuery库，使得网页的加载速度更快，同时也降低了依赖性。  首先，我们来看HTML结构：  ```html   <!--tag标题-->    <li><a href="#" class=...

			
		

	





	

		

			

				
					
基于js的iframe 可关闭tab标签组件使用方法

				
			

			

				

					01-12
				

			

		

		

			
				
本教程将详细讲解如何使用JavaScript实现一个可关闭的iframe内嵌tab标签组件。这个组件能够帮助用户在同一个页面中方便地切换和管理多个内容区域，而无需刷新整个页面。  首先，`iframe`是HTML5中的一个元素，它允许...

			
		

	





	

		

			

				
					
原生JavaScript写出Tabs标签页的实例代码

				
			

			

				

					01-19
				

			

		

		

			
				
最近在重新学习JavaScript，手写了一个tabs标签页。
话不多说，直接开始。
首先，是前端页面。

图1 tabs
先来把tabs分解一下：

图2 tabs分解
首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个span，一个用来放导航的名字，一个用来放导航关闭的icon，右边是一个button，用来添加新的导航栏及内容；下方是导航栏的内容section。
导航tabs.html代码如下：

<!DOCTYPE html>
<html lang=en>
<head>
  <meta chars

			
		

	





	

		

			

				
					
element ui同时保存多个tab页面的表单内容

				
			

			

				

					weixin_51341030的博客
				

				

					12-13
					
					4005
					
				

			

		

		

			
				
使用element-ui中tab页时在存在多个tab页面是如何获取全部tab页面的内容
 在项目阶段中碰见了这样一个问题，子组件是动态渲染出的若干个tab页面，可以来回切换，然后在父组件有一个提交按钮，点击之后，需要把这几个tab页中的数据合并到一起通过接口发送出去，看了几篇文章之后感觉不是很明白，于是就自己试着写了一个
 说一下我这边的情况，是有若干个tab页，每个页面都有若干个table表格，需要点击提交之后吧tab页中的数据集合到一起

//在子组件中
onsubmit(){
	return {
a:

			
		

	





	

		

			

				
					
JS高级实现Tab栏切换，自定义内容与增加tab项

				
			

			

				

					chili_fan的博客
				

				

					04-20
					
					1703
					
				

			

		

		

			
				
项目实现图

一，功能需求：

点击 tab栏,可以切换效果.
点击 + 号, 可以添加 tab 项和内容项.
点击 x 号, 可以删除当前的tab项和内容项.
双击tab项文字或者内容项文字可以修改里面的文字内容

二，案例准备

获取到标题元素
获取到内容元素
获取到删除的小按钮 x号
新建js文件,定义类,添加需要的属性方法(切换,删除,增加,修改)
时刻注意this的指向问题

三，代码实...

			
		

	





	

		

			

				
					
原生js实现同页面Tab切换

				
			

			

				

					upup
				

				

					11-22
					
					563
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tabbed info box</title>
  <style>
      html {
  font-family: sans-serif;
}
a
* {
  box-sizi...

			
		

	





	

		

			

				
					
[html5技术]基于bootstrap制作的多标签页(tabs)#1024程序员福音来了

				
			

			

				

					程序猿开发日志【学习永无止境】
				

				

					10-24
					
					9229
					
				

			

		

		

			
				
下载地址

点击下载

效果图

default/默认 (带有向左、向右移动以及选项菜单)

参考Demo: nav-tabs and nav-pills 



classic/折叠 (折叠隐藏tab)



 

作用与优势

通过简单的配置，生成可智能适配ajax和iframe的多标签页。
	可以直接套用bootstrap的各种模板样式。
	在不关闭窗口的情况下，直接刷新页面能保留所有标签页...

			
		

	





	

		

			

				
					
JavaScript Tab栏菜单

				
			

			

				

					qq_41927206的博客
				

				

					04-07
					
					145
					
				

			

		

		

			
				
准备一个页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equ...

			
		

	





	

		

			

				
					
Jquery tabs扩展：多个不同样式的tab如何共存？

				
			

			

				

					weixin_30691871的博客
				

				

					08-26
					
					316
					
				

			

		

		

			
				
今天做项目的时候，需要 用到2个tab,一个是简单的文字切换，一个是图片切换，在网上找到2个例子之后，代码放在同一个页面，第二个图片tab的样式总是受到第一个文字tab样式的干扰。2个tab 都采用jquery tabs, 文字切换是原版样式，图片切换是自定义样式。
由于jquery 的封装的时候在 js 里面定义了样式，不同的tab 都共用了一个 class 名字，所以要在同一个页面显示不...

			
		

	





	

		

			

				
					
JavaScript TAB栏切换效果

				
			

			

				

					火星基地
				

				

					10-24
					
					380
					
				

			

		

		

			
				
代码实现：
<!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

			
		

	





	

		

			

				
					
vue.js实现同一个页面多个页面标签

				
			

			

				

					05-31
				

			

		

		

			
				
在 Vue.js 中实现同一个页面多个页面标签（即多个 tab）的实现，可以使用 Vue.js 的路由功能和一个标签页组件。

首先，在 Vue.js 中配置路由，将多个页面的路由地址和组件对应起来。例如，可以在 `router/index.js` 中定义如下路由：

```js
import Vue from 'vue';
import Router from 'vue-router';

import Home from '@/views/Home';
import About from '@/views/About';
import Contact from '@/views/Contact';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
});
```

接着，在需要显示多个页面标签的组件中，引入一个标签页组件，并在其模板中使用路由链接和路由视图。例如，可以在 `views/Tabs.vue` 组件中使用 `vue-tabs-component` 插件实现多个标签页：

```html
<template>
  <div>
    <tabs>
      <tab v-for="tab in tabs" :key="tab.name" :label="tab.label">{{ tab.content }}</tab>
    </tabs>
    <router-view></router-view>
  </div>
</template>

<script>
import { Tabs, Tab } from 'vue-tabs-component';
export default {
  components: {
    Tabs,
    Tab
  },
  data() {
    return {
      tabs: [
        {
          name: 'home',
          label: 'Home',
          content: 'Homepage content'
        },
        {
          name: 'about',
          label: 'About',
          content: 'About page content'
        },
        {
          name: 'contact',
          label: 'Contact',
          content: 'Contact page content'
        }
      ]
    };
  }
};
</script>
```

在这个例子中，使用了 `vue-tabs-component` 插件，将 `tabs` 数组中的每一个对象转换为一个标签页，每个标签页都有一个 `name` 属性对应路由的名称，一个 `label` 属性对应标签页的文本，以及一个 `content` 属性对应标签页的内容。

最后，在需要显示标签页的组件中，引入 `Tabs.vue` 组件，并在路由配置文件中将其对应到一个路由地址。例如，可以在 `App.vue` 组件中引入 `Tabs.vue` 组件，并将其对应到根路径：

```html
<template>
  <div id="app">
    <Tabs />
  </div>
</template>

<script>
import Tabs from '@/views/Tabs';
export default {
  components: {
    Tabs
  }
};
</script>
```

```js
import Vue from 'vue';
import Router from 'vue-router';
import Tabs from '@/views/Tabs';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'tabs',
      component: Tabs,
      children: [
        {
          path: '',
          redirect: '/home'
        },
        {
          path: 'home',
          name: 'home',
          component: Home
        },
        {
          path: 'about',
          name: 'about',
          component: About
        },
        {
          path: 'contact',
          name: 'contact',
          component: Contact
        }
      ]
    }
  ]
});
```

这样，就可以在同一个页面中显示多个页面标签，并切换不同的路由视图了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值