选项卡的实现

最新推荐文章于 2023-07-13 06:30:00 发布
最新推荐文章于 2023-07-13 06:30:00 发布
阅读量445 收藏
点赞数 2
分类专栏： 前端 jquery 文章标签： jquery 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012762009/article/details/49759459
版权

通过增加元素的类和移除元素的类来实现选项卡的切换；
解析：
首先前面ul中的li的显示问题，通常li的默认显示是竖着显示，而且前面有原点，去除原点使用list-style：none；横向显示使用float：left；
下面内容区首先要清除浮动，（浮动会使内容与选项一排显示）
内容里面先设置display：none； 第一个标签里要设置两个class，然后第二个class设置display：block；根据优先级，会先选择显示出来，然后由jquery来增加和移除类使其显示，具体代码如下:
( 由写这个发现<script>标签内如果不写$(document).ready(function(){}（ 类似这种页面加载以后执行的动作函数）那么就要把标签放到body后面才能生效，否则无效)




选项卡代码如下：

<!DOCTYPE HTML>
<html lang="zh">
<head>
     <meta charset="UTF-8">
     <style type="text/css">
          .tabGroup{list-style-type: none;}
          .tab{width: 100px;height: 30px;background-color: pink;float: left;text-align: center;line-height: 30px;cursor: pointer;margin-left: 2px;}
          .tabSelect{background-color: yellow; color: black;}
          .contentGroup{clear: both;}
          .content{display: none;height: 200px;width: 400px;}
          .contentSelect{background-color:#ccc;display: block;}    
     </style>
     <script src="jquery.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){
          $('li.tab').click(function(){
               $(this).addClass('tabSelect').siblings().removeClass('tabSelect');
               var index = $(this).index();
               var $content = $(this).parent().next().children('div');
               $content.removeClass('contentSelect').eq(index).addClass('contentSelect');
          });
     });

</script>    
</head>
<body>
     <div class="tabPanels">
          <ul class="tabGroup tabSelect">
               <li class="tab">选项一</li>
               <li class="tab">选项二</li>
               <li class="tab">选项三</li>
          </ul>
          <div class="contentGroup">
               <div class="content contentSelect">内容一</div>
               <div class="content">内容二</div>
               <div class="content">内容三</div>
          </div>
     </div>
</body>
</html>
选项卡在前几天写的时候老是遇到问题，获取不到元素，在这里使用jquery，通过增加元素的类和移除元素的类来实现选项卡的切换；
解析：
首先前面ul中的li的显示问题，通常li的默认显示是竖着显示，而且前面有原点，去除原点使用list-style：none；横向显示使用float：left；
下面内容区首先要清除浮动，（浮动会使内容与选项一排显示）
内容里面先设置display：none； 第一个标签里要设置两个class，然后第二个class设置display：block；根据优先级，会先选择显示出来，然后由jquery来增加和移除类使其显示，具体代码如下:
( 由写这个发现<script>标签内如果不写$(document).ready(function(){}（ 类似这种页面加载以后执行的动作函数）那么就要把标签放到body后面才能生效，否则无效)




选项卡代码如下：

<!DOCTYPE HTML>
<html lang="zh">
<head>
     <meta charset="UTF-8">
     <style type="text/css">
          .tabGroup{list-style-type: none;}
          .tab{width: 100px;height: 30px;background-color: pink;float: left;text-align: center;line-height: 30px;cursor: pointer;margin-left: 2px;}
          .tabSelect{background-color: yellow; color: black;}
          .contentGroup{clear: both;}
          .content{display: none;height: 200px;width: 400px;}
          .contentSelect{background-color:#ccc;display: block;}    
     </style>
     <script src="jquery.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){
          $('li.tab').click(function(){
               $(this).addClass('tabSelect').siblings().removeClass('tabSelect');
               var index = $(this).index();
               var $content = $(this).parent().next().children('div');
               $content.removeClass('contentSelect').eq(index).addClass('contentSelect');
          });
     });

</script>    
</head>
<body>
     <div class="tabPanels">
          <ul class="tabGroup tabSelect">
               <li class="tab">选项一</li>
               <li class="tab">选项二</li>
               <li class="tab">选项三</li>
          </ul>
          <div class="contentGroup">
               <div class="content contentSelect">内容一</div>
               <div class="content">内容二</div>
               <div class="content">内容三</div>
          </div>
     </div>
</body>
</html>
sherry5636
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现选项卡功能
04-21
用作大家学习参考
fragment实现选项卡界面
11-24
而这种底部选项卡的风格界面的实现也由ActivityGroup转向了Fragment。先了，费话不多说了，下面我会一步一步教您怎么实现这个界面。在动手之前，我可能需要把我做好的样式图给你看一下，以遍让您有一个心里预期。
选项卡功能的实现
m0_62728880的博客
12-10 1014
在许多浏览器界面及应用中，都会涉及到选项卡功能，通过点击导航框中的选项按钮，显示出对应的页面内容，今天我给大家提供了一个运用原生js实现的选项卡效果，大家可以学习和参考。 CSS部分 * { padding: 0; margin: 0; } .all { width: 500px; height: 300px; borde...
选项卡的实现方式
郝名扬的博客
03-01 374
本文主要介绍选项卡的实现：原生javascript和jQuery 以及Bootstrap 附上演示地址：https://haochn.github.io/tab-panel
javascript 通用简单的table选项卡实现
10-29
这个例子中，我们看到一个针对表格（table）的选项卡实现方法，它旨在减少重复的JavaScript代码，提高代码复用性和质量。下面我们将详细探讨这个实现过程及其关键知识点。 首先，我们需要在HTML文件中引入`table.js...
用Juery网页选项卡实现代码
09-05
本篇将详细解释如何使用jQuery实现网页选项卡。 首先，我们需要创建HTML结构。在示例中，我们可以看到一个包含两个部分的`<div>`：一个类名为`tab_menu`的导航栏，用于显示选项卡标题；另一个是`tab_box`，用于显示...
bootstrap导航、选项卡实现代码
08-31
在本示例中，我们关注的是Bootstrap中的导航（Navigation）和选项卡（Tab）组件的实现。 1. **Bootstrap导航（Navigation）**： - `nav` 类：这是导航的基础样式，用于创建基础的导航条。 - `nav-tabs` 类：用于...
dojo学习第一天 Tab选项卡 实现
10-28
可能很多人都对dojo只闻其名，觉得有了jquery、prototype、YUI等这些优秀的js库了，dojo还有它存在的必要吗？
选项卡效果实现
aminwangaa的博客
09-14 511
选项卡效果实现 第一步：在body里设置ul、li、div &lt;div id="tab"&gt; &lt;ul&gt; &lt;li&gt;新闻&lt;/li&gt; &lt;li class="selectedLi"&gt;电影&lt;/li&gt; &lt;li&gt;音乐&lt
简单实现选项卡例子
七月秋风的专栏
09-24 791
通常使用DIV+CSS+javascript实现选项卡，这里我用table+css+javascript ,原理一样其实复杂的DIV+CSS+js的应用都差不多，只要把简单的原理弄清楚了，在难的应用也不过如此说正题：背景：利用 table+CSS+Javascript实现选项卡功能原理：利用 js操作控制Table的隐藏和呈现，以及js控制相关样式，实现更好的用户体验步骤：
tab选项卡实现
qq_46705598的博客
06-24 488
tab选项卡实现前言：效果图：代码右键点击关闭选项卡 前言： 选项卡的实现基于前面tree组件的实现，链接如下 [tree组件实现](https://blog.csdn.net/qq_46705598/article/details/106912698) [tree组件的后端](https://blog.csdn.net/qq_46705598/article/details/106891364) 效果图： 代码 界面代码，默认设置一个首页的tab页： <div id="booktabs" cla
JS代码实现选项卡功能
米兰小铁匠的博客
02-11 830
在平时的网页开发中会遇到很多选项卡功能的情况，下面通过一个简单的例子说明选项卡如何实现 首先，选项卡基本的样式会有可以点击的选项按钮，以及按钮对应的显示内容。这是一个基本的选项卡应该具备的两大部分。所以我在结构的布局上选用： 1、一个大DIV中套有三个button，三个小div。 2、内部样式中将三个小div全部display none。三个button的北京颜色全部设置成一个灰色（举例子） 3、...
JS 小练习之实现选项卡
weixin_41586886的博客
06-02 1005
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;实现选项卡&lt;/title&gt; &lt;style&gt; #div1 di
jquery实现简单的选项卡功能
wm1029218932的博客
09-18 2019
html部分<ul id="pro_menu"> <li class="tabFocus">菜单一</li> <li id="jjb">菜单二</li> <li id="dydb">菜单三</li> <li id="dydb">菜单四</li> </ul> <ul id="pro_content"> <li>这是菜单一的内容</li> <li>这是菜单
前端框架Layui实现动态选项卡&iframe使用（附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-13 4638
iframe（内嵌框架）是HTML中的一个标签，用于在网页中嵌入另一个页面或文档。通过使用iframe标签，可以在网页中创建一个独立的内联框架，用于显示来自不同源或同一源的外部内容。这个嵌入的页面可以是其他网页、视频、地图、广告等等。src：指定要加载的内容的URL。width：指定`iframe`的宽度。-height：指定`iframe`的高度。frameborder：指定是否显示边框。scrolling：指定是否显示滚动条。
js实现选项卡
qq_52440306的博客
09-23 6933
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
使用JS实现简单的选项卡功能
热门推荐
Max的博客
08-17 1万+
首先我们来写HTML代码，构建出整体结构 &amp;amp;amp;n
html选项卡实现效果
最新发布
06-22
在这个例子中，有两个按钮代表两个选项卡，它们触发`showTab`函数，该函数会根据传入的索引隐藏显示相应的`tab-pane`内容。`.tab-content`初始设置为`display:none`，`active`类激活时设置为`display:block`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值