js和jquery分别实现tab标签页

客官°小女子只卖身不卖艺 2022-08-12 05:58 200阅读 0赞

首先列出样式和html标签

<style type="text/css">
            *{margin: 0;padding: 0;}
            #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 20px;}
            #container div{display: none; width: 303px; height: 300px;  border: 1px solid #ddd; }
            #container .ssd{display: block;}
            .ssl{background: #abcdef;}
      	</style>
      </head>
      <body>
        <div id="tab">
        	<ul id="myul">
        		<li class="ssl">1</li>
        		<li>2</li>
        		<li>3</li>
        	</ul>
        	<div  id="container">
    	    	<div class="ssd">woshi1</div>
    	    	<div>woshi2</div>
    	    	<div>woshi3</div>
        	</div>
        </div>

然后就是原生的js 实现tab标签 的代码

<script type="text/javascript">
            var ul = document.getElementById('myul');
            var li = ul.getElementsByTagName('li');
            var con = document.getElementById('container');
            var div = con.getElementsByTagName('div');
            
            var len = li.length;
            for (var i = 0; i < len; i++) {
            	li[i].index = i;
            	li[i].οnclick=choose;
            	li[i].onmouseover = choose;
            };
    
            function choose(){
            	for(var j = 0; j < len; j++) {
    	        		li[j].className = '';
    	        		div[j].style.display = 'none';
    	        	}
            	    this.className = 'ssl';
            	    div[this.index].style.display='block';
            }
    
        </script>

那我们改用jquery实现 代码如下

$('#myul li').click(choose);
           $('#myul li').hover(choose);
            function choose(){
            	$(this).addClass('ssl').siblings().removeClass('ssl');
            	$('#container div').eq($(this).index()).show().siblings().hide();
            }

其实函数还可以简化

function choose(){
            	$(this).addClass('ssl').siblings().removeClass('ssl').parent().next().children().eq($(this).index()).show().siblings().hide();
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 标签页（Tabs）

一种多面板的单内容区，每个面板与列表中的标题相关。如需了解更多有关 tabs 部件的细节，请查看 API 文档 [标签页部件（Tabs Widget）][Tabs Widg

矫情吗；*/ 2024年03月24日 17:57/ 0 赞/ 27 阅读

相关 jQuery EasyUI 布局 - 添加自动播放标签页（Tabs）

本教程将向您展示如何创建一个自动播放的 Tabs。 Tabs 组件显示第一个 tab 面板，然后显示第二个、第三个... 我们将写一些代码来自动地切换 tab 面板，然后让它循

怼烎@/ 2024年03月23日 16:57/ 0 赞/ 73 阅读

相关 jQuery EasyUI 布局 - 创建标签页（Tabs）

本教程将向您演示如何使用 easyui 创建一个 Tabs 组件。 Tabs 有多个可以动态地添加或移除的面板（panel）。您可以使用 Tabs 来在相同的页面上显示不同的

ゝ一纸荒年。/ 2024年03月23日 16:22/ 0 赞/ 53 阅读

相关 Tabs 标签页

![在这里插入图片描述][5daa8017173d4819b65bdd2ef45d3c9b.png] <template> <div id="contaion

Love The Way You Lie/ 2024年02月05日 20:14/ 0 赞/ 21 阅读

相关 “tabs标签页” 动手用jQuery封装tabs标签页，可自定义标签位置（上、下、左、右）

刚写一会，明天再更，先把自己写遇到的问题，记录一下问题一已解决关于点击新的tab标签，如何去掉旧标签样式的思路，目前有两个， 1、自己一开始的思路是，va

蔚落/ 2023年06月15日 07:07/ 0 赞/ 18 阅读

相关 js和jquery分别实现tab标签页

首先列出样式和html标签 <style type="text/css"> {margin: 0;padding: 0;}

客官°小女子只卖身不卖艺/ 2022年08月12日 05:58/ 0 赞/ 201 阅读

相关 jquery标签页

js： var timoutid; $(document).ready(function()\{ //找到所有的标签 /\ $("li

雨点打透心脏的1/2处/ 2022年06月09日 02:55/ 0 赞/ 275 阅读

相关 bootstrap标签页（tab）

Bootstrap 标签页（Tab）插件标签页（Tab）在 [Bootstrap 导航元素][Bootstrap] 一章中介绍过。通过结合一些 data 属性，您可以轻

r囧r小猫/ 2022年05月31日 04:23/ 0 赞/ 312 阅读

相关基于jQuery实现tab选项卡【js实现页签切换】

-------------------- 任务描述本关任务：用jquery实现一个`tab`切换的功能。效果图如下： ![195313][] 相关知识为了完成

青旅半醒/ 2022年04月11日 02:50/ 0 赞/ 346 阅读

相关 Navigation-Tabs标签页

Tabs 标签页:分隔内容上有关联但属于不同类别的数据集合。 1、基本使用 Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value（v-model

亦凉/ 2022年03月30日 03:27/ 0 赞/ 343 阅读