html nav nav-tabs左右切换的案例

时间: 2023-08-22 20:35:49 浏览: 142

html 实现tab切换的示例代码

tab切换在项目中也算是常用技术，一般实现tab切换都用js或者jq实现，今天介绍两种只用css实现tab切换方法：方法一：原理：通过label标签的关联属性和input的单选类型实现相应div的显示 1.创建一个类名为wrap的div当作容器 2.创建四个label标签，这将作为tab切换项 3.在每一个label中创建一个span标签（导航内容），input标签（实现选中于取消选中）type类型为radio，还要创建一个div作为这个导航项被点中是显示内容框，这里要注意的是input标签的name必须是相同的，我这边取名叫tab 最终HTML为下面这样： <div class="w 在网页设计中，Tab切换是一种常见的交互方式，用于在有限的空间内展示多个内容板块。通常，我们使用JavaScript或jQuery来实现这种功能，但有时仅使用HTML和CSS也能达到相同的效果，这种方法可以减少对JavaScript的依赖，使页面加载更快。本文将介绍两种纯CSS实现Tab切换的方法。 ### 方法一：基于Label和Input的Radio类型这种方法利用了HTML的`<label>`标签和`<input type="radio">`的关联性。以下是如何实现的步骤： 1. 创建一个具有类名`wrap`的`<div>`作为容器，它将包裹所有的Tab元素。 2. 创建四个`<label>`标签，每个标签将作为一个Tab选项。 3. 在每个`<label>`中包含一个`<span>`标签，用于显示Tab的文本，以及一个`<input type="radio">`标签，用于实现选择与取消选择。确保所有`<input>`的`name`属性相同，以便它们互斥。 4. 随后，在每个`<label>`内部添加一个`<div>`，作为当Tab被选中时显示的内容区域。`<input>`的`name`属性应与`<label>`内的`<input>`相同。 ```html <div class="wrap"> <label> <span>home</span> <input type="radio" name="tab" checked> <div>home-page</div> </label> ... </div> ``` 接下来，我们使用CSS来隐藏不需要的Tab内容，并在选中相应的`<input>`时显示对应的`<div>`： ```css * { margin: 0; padding: 0; } .wrap { margin: 20px auto; width: 403px; height: 600px; border: 1px solid brown; position: relative; } /* 更多CSS样式... */ ``` 关键的CSS部分包括隐藏`<input>`（避免显示小圆点）和利用`:checked + div`选择器来显示选中的`<div>`内容： ```css input { width: 0; } input:checked + div { display: block; } ``` ### 方法二：基于A标签的锚点定位此方法利用HTML的`<a>`标签及其`href`属性指向要显示的`<div>`的ID。步骤如下： 1. 创建一个具有类名`wrap`的`<div>`，并在其中添加一个类名为`nav`的`<div>`，用于放置Tab选项的`<a>`标签。 2. 每个`<a>`标签的`href`属性设置为对应内容`<div>`的ID。 3. 创建一个与`nav`同级的类名为`sh`的`<div>`，包含所有待切换的`<div>`内容。 ```html <div class="wrap"> <div class="nav"> <a href="#home">home</a> <a href="#list">list</a> ... </div> <div class="sh"> <div id="home">home-page</div> <div id="list">list-page</div> ... </div> </div> ``` 使用CSS隐藏`sh`类下的所有`<div>`，并通过`:target`选择器显示当前选中的`<div>`： ```css .sh div { display: none; } .sh :target { display: block; } ``` 这种方法的优点是简单且易于理解，缺点是无法实现动态交互，如悬停效果，以及可能受到浏览器滚动条的影响。总结来说，这两种纯CSS实现的Tab切换方法各有优劣，适用于不同场景。在实际开发中，我们可以根据项目需求和性能考虑选择合适的方法。如果需要更复杂的功能，例如动画过渡、鼠标悬停效果等，JavaScript仍然是更灵活的选择。

以下是一个简单的HTML nav nav-tabs左右切换的案例： ```html <!DOCTYPE html> <html> <head> <title>Nav Tabs</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Nav Tabs</h2> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a> </li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane fade show active"> <h3>Tab 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi ac tellus maximus dictum. Sed aliquam libero vel tellus tristique laoreet. Donec id enim ac arcu bibendum vestibulum. Proin nec purus quis elit interdum finibus sit amet vel ex. Nulla facilisi. Sed nec sapien euismod, aliquam ante eu, imperdiet ante. Donec varius commodo sapien, eget ornare justo varius ac. Fusce egestas, nunc et imperdiet sodales, libero ipsum congue arcu, eu lacinia nulla ex eu elit. Praesent id neque ut nulla sagittis malesuada.</p> </div> <div id="tab2" class="tab-pane fade"> <h3>Tab 2</h3> <p>Quisque tincidunt nisi ac tellus maximus dictum. Sed aliquam libero vel tellus tristique laoreet. Donec id enim ac arcu bibendum vestibulum. Proin nec purus quis elit interdum finibus sit amet vel ex. Nulla facilisi. Sed nec sapien euismod, aliquam ante eu, imperdiet ante. Donec varius commodo sapien, eget ornare justo varius ac. Fusce egestas, nunc et imperdiet sodales, libero ipsum congue arcu, eu lacinia nulla ex eu elit. Praesent id neque ut nulla sagittis malesuada.</p> </div> <div id="tab3" class="tab-pane fade"> <h3>Tab 3</h3> <p>Sed aliquam libero vel tellus tristique laoreet. Donec id enim ac arcu bibendum vestibulum. Proin nec purus quis elit interdum finibus sit amet vel ex. Nulla facilisi. Sed nec sapien euismod, aliquam ante eu, imperdiet ante. Donec varius commodo sapien, eget ornare justo varius ac. Fusce egestas, nunc et imperdiet sodales, libero ipsum congue arcu, eu lacinia nulla ex eu elit. Praesent id neque ut nulla sagittis malesuada.</p> </div> <div id="tab4" class="tab-pane fade"> <h3>Tab 4</h3> <p>Donec varius commodo sapien, eget ornare justo varius ac. Fusce egestas, nunc et imperdiet sodales, libero ipsum congue arcu, eu lacinia nulla ex eu elit. Praesent id neque ut nulla sagittis malesuada.</p> </div> </div> </div> </body> </html> ``` 注意，这个案例中使用了Bootstrap框架，所以需要引入Bootstrap的CSS和JavaScript文件。其中，`ul`元素的class为`nav nav-tabs`，`li`元素的class为`nav-item`，`a`元素的class为`nav-link`，`data-toggle`属性用于指定切换方式，`href`属性用于指定显示的内容。`div`元素的class为`tab-pane fade`，`id`属性需要与`a`元素的`href`属性对应。

阅读全文

html nav nav-tabs左右切换的案例

相关推荐

左侧导航与tab页切换HTML示例

Vue.js组件tabs实现选项卡切换效果

Bootstrap Tabs选项卡切换代码

HTML5CSS3实现Tabs选项卡特效.zip

22HTML5 SVG炫酷垂直Tabs选项卡布局特效效果

【JavaScript源代码】JavaScript实现简易tab栏切换案例.docx

jQuery垂直Tabs新闻滑块.zip

Bootstrap选项卡美化Tabs特效.zip

Tab效果切换页面

jQuery图标选项卡切换_点击图标导航上下滑动选项卡切换代码

bootstrap一个小案例

Bootstrap前端开发案例二

兼容常用的tab切换

bootstrap实现tab选项卡切换

Tab选项卡切换代码.zip

BootstrapTabs选项卡切换代码.zip

基于bootstrap用iframe实现的局部刷新的案例

AngularJS 实现Tab栏与mvc案例解析

黑马tab栏切换案例

最新推荐

解决vue中el-tab-pane切换的问题

LABVIEW程序实例-DS写属性数据.zip

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

"互动学习：行动中的多样性与论文攻读经历"

【Shell脚本进阶】：wc命令行数统计的高级用法及解决方案

python编写一个程序，使得根据输入的起点和终点坐标值计算出坐标方位角