TAB&（Nav）导航菜单

最新推荐文章于 2025-07-29 10:11:08 发布
转载 最新推荐文章于 2025-07-29 10:11:08 发布 · 420 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/glelaine/blog/23622
文章标签：

#javascript #xhtml #python #ViewUI

本文介绍了一个简单的TAB（Nav）导航菜单实现方案，通过HTML和JavaScript实现了动态切换不同内容板块的功能。该方案使用纯JavaScript编写，不依赖任何第三方库。

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>TAB（Nav导航菜单</title>

<style type="text/css">

/*  TAB*/

.tab{width:520px;height:auto;float:right;}
.tab ul li{float:left;margin-left:10px;}
.menu_tab{float:right;width:520px;padding:15px 0 15px 10px;height:auto;text-indent:15px;border:1px solid #eaeaea;}
.menu_tab span a{text-decoration:none;}
    </style>
</head>
<body>
<script tyle="text/javascript">
    function qiehuan(num){
        for(var i=0; i<=4; i++){
            if(i==num){
            document.getElementById("tab_qie"+i).style.display="block";
            document.getElementById("mytab"+i).className="tab_on";
            }
            else
            {
            document.getElementById("tab_qie"+i).style.display="none";
            document.getElementById("mytab"+i).className="";
            }
        }
    }

</script>

</head>

<body>

<div class="tab">
    <ul>
        <li id="mytab0" class="tab_on" onmouseover=javascript:qiehuan(0) ><a href="">new tip</a></li>   <!--  如换成鼠标点击触发事件可改onmouseover为onClick=***-->
        <li id="mytab1" class="tab_off" onmouseover=javascript:qiehuan(1)><a href="">tips</a></li>
        <li id="mytab2" class="tab_off" onmouseover=javascript:qiehuan(2)><a href="">summary</a></li>
        <li id="mytab3" class="tab_off" onmouseover=javascript:qiehuan(3)><a href="">cate</a></li>
        <li id="mytab4" class="tab_off" onmouseover=javascript:qiehuan(4)><a href="">data</a></li>
    </ul>
    <div class="menu_tab">
        <div id="tab_qie0" style="display:block">
            <span><a href="">栏目1</a></span>
            <span><a href="">栏目2</a></span>
            <span><a href="">栏目3</a></span>
        </div>
        <div id="tab_qie1" style="display:none">
            <span><a href="">栏目4</a></span>
            <span><a href="">栏目5</a></span>
            <span><a href="">栏目6</a></span>
        </div>
        <div id="tab_qie2" style="display:none">
            <span><a href="">栏目7</a></span>
            <span><a href="">栏目8</a></span>
            <span><a href="">栏目9</a></span>
        </div>
        <div id="tab_qie3" style="display:none">
            <span><a href="">栏目10</a></span>
            <span><a href="">栏目11</a></span>
            <span><a href="">栏目12</a></span>
        </div>
        <div id="tab_qie4" style="display:none">
            <span><a href="">栏目13</a></span>
            <span><a href="">栏目14</a></span>
            <span><a href="">栏目15</a></span>
        </div>
    </div>

</div>

</body>

转载于:https://my.oschina.net/glelaine/blog/23622

CSS day_13(6.28) Boot常用组件（nav、tab、分页）Sass介绍
m0_70328115的博客
07-01 589
Boot常用组件（nav、tab、分页）Sass介绍
Bootstrap基础--选项卡
热门推荐
小白的博客
08-05 1万+
Bootstrap基础–选项卡(nav-tabs) 选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。 一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。 注意： 选项卡中链接的锚点要与对应的面板内容容器的
使用Tabnav来简化页面tab布局
hulu021821
12-11 787
Tabnav是SeeSaw的Widgets中的一部分，可以非常方便的实现tab 1、plugin   ruby script/plugin install svn://svn.seesaw.it/widgets/trunk   2、创建一组tab ruby script/generate tabnav Main       这条指令会产生...
tabNav横竖菜单切换
08-28
tabNav横竖菜单切换，滚动条自动移动到居中位置
React Native 导航实战：TabBar与Nav界面设计
最新发布
weixin_31597759的博客
07-29 643
在现代移动应用开发中，用户界面（UI）导航是构建流畅用户体验的关键部分。是Facebook推出的一个开源框架，允许开发者使用JavaScript和React来创建真正原生的应用程序。本章将简要介绍React Native中导航技术的重要性，并概述为何需要掌握高级导航技术。React Native本身提供了基础的导航能力，但在复杂的应用场景下，原生的导航功能并不足以满足需求。
CSS+JS选项卡式导航菜单
03-18
NULL 博文链接：https://gucy.iteye.com/blog/656366
标签navtab
weixin_33726943的博客
11-17 793
创建navtab   创建一个navtab有以下两种方式： 1、Data属性：DOM添加属性data-toggle="navtab&quot;后，单击触发。 a链接示例： &lt;a href="form/other.jsp" data-toggle="navtab&quot; data-id="mynavtab&quot; data-reload-warn="已打开业务界面，确认将重新载入？" data-title=&quot
vue tabNav 点击
weixin_30879169的博客
04-23 237
1 <template> 2 <div class="content"> 3 <header class="tab_nav"> 4 <div v-for="(item,index) in tabNav" :key="index" @click = "selected(index, ...
tabnav:用于生成导航栏的 Rails 助手
06-21
塔布纳夫 Tabnav 是生成导航栏的助手。 它允许您简单地为每个选项卡指定突出显示规则。 主页： : 问题： : 一些例子 简单示例 在您看来： <% render_tabnav do | nav | nav . add_tab do | tab | tab . named "Home" tab . links_to root_path tab . highlights_on :controller => :home , :action => :index end nav . add_tab do | tab | tab . named "Froobles" tab . links_to froobles_path tab . highlights_on :controller
Tab导航栏切换的实现
Anita的博客
06-19 7083
文章目录前言一、自定义属性1.自定义属性的目的2.自定义属性的操作3.规范二、导航栏的实现1.静态样式2.JS实现交互总结 前言 Tab导航栏切换在网页场景中十分常见，本文将介绍如何用js来实现交互的导航栏。 分析： 1.当鼠标点击上面相应的选项卡（tab），下面盒子的内容跟随变化 2.点击某一个选项，当前这一个底色会变成红色，字体变白色，其余不变。 3.下面的模块显示内容需要和上面选项卡一一对应，互相匹配。 思路：可以给选项卡添加自定义属性（索引号index），属性值从0开始编号。当点击某个选项卡，下
微信小程序tab切换，可滑动切换，导航栏跟随滚动实现
aibiba0894的博客
02-18 1619
简介 看到今日头条小程序页面可以滑动切换，而且tab导航条也会跟着滚动，点击tab导航，页面滑动，切导航栏也会跟着滚动，就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多，我这里只是一个小demo，没有怎么去考虑数据的问题，主要是想着去实现这么个功能，有可能后期引入数据后会出现问题，欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不...
使用JS来实现tab栏切换
weixin_64965154的博客
05-28 3807
我们这里使用的是：document.querySelectorAll，因为要我们直接获取全部的a标签，所以我们写这个会更好，然后我们需要遍历这个a，运用到for循环。然后我们如果选择第一个，那么我们第二个就不会显示出来，所以我们选择第一个的时候得干掉第二个，这时候我们就可以使用这行代码。这是我今天从学习的知识点，今天试着做了一个tab栏切换，学到很多的知识点，讲师也比学校的老师讲的更加详细明白。这里的意思是我们每选择一个那么我们就会增加一个元素，而前面经过后就会消除掉。
tab栏切换案例
Z1014h的博客
09-03 485
利用JS实现商品tab栏切换案例
nav-tabs选项栏
hexianfan的博客
03-23 261
【代码】nav-tabs选项栏。
python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)
qq_27371025的博客
10-13 2347
前言 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。 tab标签页 在标签 ul 添加 nav 和 nav-tabs 属性,将应用Bootstrap标签样式。 在li 里面 a 标签上简单的指定 data-toggle=“tab” 或 data-toggle=“pill”，就可以完成一个标签导航页 <ul id="tabs" class="nav nav-tabs"> <li><a h
[html5技术]基于bootstrap制作的多标签页(tabs)#1024程序员福音来了
程序猿开发日志【学习永无止境】
10-24 9676
下载地址 点击下载 效果图 default/默认 (带有向左、向右移动以及选项菜单) 参考Demo: nav-tabs and nav-pills  classic/折叠 (折叠隐藏tab)   作用与优势 通过简单的配置，生成可智能适配ajax和iframe的多标签页。 可以直接套用bootstrap的各种模板样式。 在不关闭窗口的情况下，直接刷新页面能保留所有标签页...
为Bootstrap标签页切换nav-tab组件添加 切换回调方法 - callback
Rudon滨海渔村的博客
10-19 1430
效果 nav-tab标签切换后，js可以执行指定函数。 关键代码 <ul class="nav nav-tabs nav-justified" role="tablist"> <li role="presentation" class="active"> <a href="#tab1st" aria-controls="tab1st" role="tab" data-toggle="tab" data-target-go='AAA'>
JavaScript对tab栏切换的常用几种方法
weixin_61683893的博客
04-11 4232
【代码】JavaScript对tab栏切换的常用几种方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值