jq实现tab选项卡

心已赠人 2023-02-11 07:27 13阅读 0赞

<div class="tab">
            <ul class="tab-title">
              <li class="this">网站设置</li>
              <li>用户管理</li>
              <li>权限分配</li>
              <li>商品管理</li>
              <li>订单管理</li>
            </ul>
            <div class="tab-content">
              <div class="tab-item show">内容1</div>
              <div class="tab-item">内容2</div>
              <div class="tab-item">内容3</div>
              <div class="tab-item">内容4</div>
              <div class="tab-item">内容5</div>
            </div>
          </div>

<script>
       $('.tab-title li').on('click',function(){
           $(this).addClass('this').siblings().removeClass("this");;
           var index = $(this).index();
           //siblings() 同级，同胞元素
           //parent() 获得当前匹配元素的父元素
    　　　　$(this).parent().siblings().children().eq(index).addClass("show")
    　　　　.siblings().removeClass("show");
           
       })
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522134512471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

相关 JQ实现选项卡样式切换

HTML <div> <ul> <li class="active"></li> <li></li> <li>

傷城~/ 2023年02月16日 06:47/ 0 赞/ 15 阅读

相关 jq实现tab选项卡

<div class="tab"> <ul class="tab-title"> <li class="this">

心已赠人/ 2023年02月11日 07:27/ 0 赞/ 14 阅读

相关 html tab选项卡控件,tab选项卡插件

这是一款使用十分方便的、为移动设备定制的、可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件。在你要显示很多不同的内容时，tab选项卡导航方式是十分有用

阳光穿透心脏的1/2处/ 2022年10月06日 01:50/ 0 赞/ 281 阅读

相关 jQ选项卡

jQ选项卡 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-

刺骨的言语ヽ痛彻心扉/ 2022年06月14日 10:54/ 0 赞/ 255 阅读

相关 jq实现的选项卡

效果图： ![这里写图片描述][SouthEast] 代码如下： <!DOCTYPE html> <html lang="en"> <head>

偏执的太偏执、/ 2022年05月31日 04:08/ 0 赞/ 203 阅读

相关 JQ实现——TAB选项卡切换登录界面

今天，分享一个简单实用的TAB选项卡切换登录界面。 ![这里写图片描述][70] ![这里写图片描述][70 1] 主页部分 <!DOCTYPE htm

柔光的暖阳◎/ 2022年05月23日 12:12/ 0 赞/ 398 阅读

相关 Tab切换选项卡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tab切换选项卡

左手的ㄟ右手/ 2022年05月09日 06:58/ 0 赞/ 348 阅读

相关 tab切换选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

ゝ一纸荒年。/ 2022年02月02日 00:45/ 0 赞/ 445 阅读

相关 tab选项卡

tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

た入场券/ 2022年01月21日 09:47/ 0 赞/ 487 阅读

相关网页Tab选项卡实现

转自:[慕课网][Link 1] 效果图如下： ![20151216175601456][] html代码部分: <!doctype html>

港控/mmm°/ 2021年06月10日 20:41/ 0 赞/ 571 阅读