js和jquery分别实现tab标签页

客官°小女子只卖身不卖艺 2022-08-12 05:58 194阅读 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 条评论，194人围观）

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

相关阅读

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

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

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

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

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

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

相关 jquery标签页

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

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

相关用 vue-router 实现 tab 标签页（单页面）

vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-r

迈不过友情╰/ 2022年06月07日 09:29/ 0 赞/ 275 阅读

相关 bootstrap标签页（tab）

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

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

相关 JavaScript和JQuery分别实现Ajax

index010\_js & index010\_jquery的body代码中都写入： <form action="validate" method="post">

超、凢脫俗/ 2022年05月19日 05:26/ 0 赞/ 205 阅读

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

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

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

相关 Navigation-Tabs标签页

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

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

相关 jQuery实现tab切换

$('tab-content li').click(function() { var i = $(this).index();//下标

野性酷女/ 2021年11月05日 06:10/ 0 赞/ 352 阅读

相关 jQuery--标签页效果

前言内容显示效果 HTML代码： CSS代码： Ja

绝地灬酷狼/ 2021年09月27日 04:56/ 0 赞/ 403 阅读