精华内容
下载资源
问答
  • jQuery tab栏切换

    2021-03-31 17:31:29
    } style> <script src="jquery.min.js">script> head> <body> <div class="tab"> <div class="tab_list"> <ul> 商品介绍li> 规格与包装li> 售后保障li> 商品评价(50000)li> 手机社区li> ul> div> <div class="tab...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            .tab {
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list {
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
            
            .item_info {
                padding: 20px 0 0 20px;
            }
            
            .item {
                display: none;
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(50000)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block;">
                    商品介绍模块内容
                </div>
                <div class="item">
                    规格与包装模块内容
                </div>
                <div class="item">
                    售后保障模块内容
                </div>
                <div class="item">
                    商品评价(50000)模块内容
                </div>
                <div class="item">
                    手机社区模块内容
                </div>
    
            </div>
        </div>
        <script>
            $(function(){
                //1.点击li,当前li添加current类,其余兄弟移除
                $(".tab_list li").click(function(){
                    $(this).addClass("current").siblings().removeClass("current");
    
                    // 2.点击的同时,得到list的索引号
                    var index = $(this).index();
                
                    // 对应索引号的item显示,其余隐藏
                    $(".tab_con .item").eq(index).show().siblings().hide();
                })
            })
        </script>
    </body>
    
    </html>
    
    展开全文
  • jQuery TAB栏切换效果

    2020-10-27 17:58:05
    } style> <script src="https://blog-static.cnblogs.com/files/jacklzx/jquery.min.js">script> head> <body> <div class="tab"> <div class="tab_list"> <ul> 商品介绍li> 规格与包装li> 售后保障li> 商品评价...

    实现效果:

    在这里插入图片描述

    代码实现:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            .tab {
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list {
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
            
            .item_info {
                padding: 20px 0 0 20px;
            }
            
            .item {
                display: none;
            }
        </style>
        <script src="https://blog-static.cnblogs.com/files/jacklzx/jquery.min.js"></script>
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(50000)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block;">
                    商品介绍模块内容
                </div>
                <div class="item">
                    规格与包装模块内容
                </div>
                <div class="item">
                    售后保障模块内容
                </div>
                <div class="item">
                    商品评价(50000)模块内容
                </div>
                <div class="item">
                    手机社区模块内容
                </div>
    
            </div>
        </div>
        <script>
            $(function() {
                $(".tab_list li").click(function() {
                    $(this).addClass("current").siblings().removeClass("current");
                    var index = $(this).index();
                    $(".tab_con .item").eq(index).show().siblings().hide();
                });
            });
        </script>
    </body>
    
    </html>
    
    展开全文
  • 具体实现功能 切换选项卡 添加选项卡 删除选项卡 编辑选项卡 html结构 <div class="tabsbox" id="tab"> <!-- tab标签 -->...-- tab栏标题 --> <ul> <li class="liacti

    具体实现功能

    1. 切换选项卡
    2. 添加选项卡
    3. 删除选项卡
    4. 编辑选项卡

    html结构

    <div class="tabsbox" id="tab">
                <!-- tab标签 -->
                <nav class="firstnav">
                    <!-- tab栏标题 -->
                    <ul>
                        <li class="liactive">
                            <span>测试1</span>
                            <span class="close">×</span>
                        </li>
                        <li><span>测试2</span><span class="close">×</span></li>
                        <li><span>测试3</span><span class="close">×</span></li>
                    </ul>
                    <!-- 添加按钮 -->
                    <div class="tabadd">
                        <span>+</span>
                    </div>
                </nav>
    
                <!-- tab 内容 -->
                <div class="tabscon">
                    <section class="conactive">内容1</section>
                    <section>内容2</section>
                    <section>内容3</section>
                </div>
            </div>
    

    css部分

    * {
      margin: 0;
      padding: 0;
    }
    main {
      width: 900px;
      margin: 0px auto;
    }
    h4 {
      text-align: center;
      line-height: 50px;
    }
    .tabsbox {
      width: 800px;
      margin: 0 auto;
      border: 1px solid orange;
    }
    .firstnav {
      position: relative;
      line-height: 40px;
      height: 40px;
      text-align: center;
      border-bottom: 1px solid #999;
    }
    .firstnav li {
      list-style: none;
      width: 100px;
      float: left;
      border-right: 1px solid #999;
      position: relative;
      cursor: pointer;
    }
    .firstnav li span {
      /* 阻止用户选中文字 */
      user-select: none;
    }
    .firstnav li.liactive::after {
      content: "";
      width: 100%;
      height: 2px;
      position: absolute;
      z-index: 11;
      bottom: -2px;
      left: 0;
      background: #fff;
    }
    .firstnav .close {
      cursor: pointer;
      position: absolute;
      right: 2px;
      top: 2px;
      font-size: 14px;
      color: #666;
      border: 1px solid #ccc;
      width: 14px;
      height: 14px;
      line-height: 12px;
      text-align: center;
      border-radius: 100%;
    }
    .tabscon {
      height: 300px;
      white-space: normal;
    }
    .tabscon input {
      width: 100%;
      height: 80px;
    }
    .tabscon section {
      padding: 30px;
      display: none;
    }
    .tabscon section.conactive {
      display: block;
    }
    .tabadd {
      position: absolute;
      padding: 0 10px;
      right: 10px;
      top: 0px;
      font-size: 20px;
      cursor: pointer;
      user-select: none;
    }
    input {
      width: 50px;
      line-height: 20px;
    }
    

    jQuery部分

    $(function() {
      // 点击切换
      $('ul').on('click', 'li', function() {
          // 切换选项卡
          $(this).addClass('liactive').siblings().removeClass('liactive')
            // 获取点击的li的索引值
          var index = $(this).index()
            // 排他思想让内容显示与隐藏
          $('.tabscon section').eq(index).stop().show().siblings().hide()
        })
        // 添加选项卡
      $('.tabadd').click(function() {
          // 只能创建7个
          if ($('li').length >= 7) {
            return
          }
          var li = `
        <li><span>New Tab</span><span class="close">×</span></li>
        `
          var section = `
        <section>新增内容</section>
        `
            // 把新增的li添加到ul
          $('ul').append(li)
            // 把新增的内容添加到tabscon
          $('.tabscon').append(section)
            // $('ul li').length - 1这里获取的是索引从0开始
          $('ul').children().eq($('ul li').length - 1).click()
        })
        // 删除选项卡
      $('ul').on('click', '.close', function() {
          // 获取当前li的索引
          var index = $(this).parent('li').index()
            // console.log(index)
            // 要进行判断
            // 三个状态:
            // 1.选中的还是未选中的,不选中不管它
            // 2.选中的情况删除的是第一个,点击后面一个
            // 3.只剩一个不管
            // 如果当前的li是被点击的
          if ($(this).parent().hasClass('liactive')) {
            // 如果当前被点击的不是第一个li
            if (index != 0) {
              // 让它上一个li被点击
              $(this).parent('li').prev().click()
                // 如果li不止一个让下一个li点击
            } else if ($('ul li').length != 1) {
              $(this).parent('li').next().click()
            }
          }
          // 移除当前li
          $(this).parent().remove()
            // 移除当前的内容
          $('.tabscon section').eq(index).remove()
        })
        // 编辑选项卡
      $('ul').on('dblclick', 'li', function() {
        // 选中li子元素的第一个span
        $(this).children().eq(0).html('<input type="text" value="' + $(this).children().eq(0).text() + '"/>')
          // 选中输入框中的文字
        $(this).find('input').select()
          // 失去焦点让span的值等于输入框中的值
        $('input').blur(function() {
            // 让span的值等于输入框中的值
            $(this).parent().text($(this).val())
          })
          // 键盘抬起事件
        $('input').keyup(function(e) {
          // 按下回车失去焦点
          if (e.keyCode == 13) {
            $(this).blur()
          }
        })
    
      })
    
    
    })
    

    在这里插入图片描述

    展开全文
  • jQuery实战_tab栏切换

    万次阅读 2018-06-25 10:05:46
    jQuery实现tab栏切换 HTML结构: CSS: active 用来显示下划线 selected 用来控制显示(默认都是隐藏的) JS: $(function(){ $(&amp;quot;ul&amp;amp;gt;li&amp;quot;).mouseenter...

    jQuery实现tab栏切换

    HTML结构:

    <ul>
        <li class="active">第一栏</li>
        <li>第二栏</li>
        <li>第三栏</li>
        <li>第四栏</li>
    </ul>
    <div class="content">
        <div class="tab selected">我是第一栏的内容</div>
        <div class="tab">我是第二栏的内容</div>
        <div class="tab">我是第三栏的内容</div>
        <div class="tab">我是第四栏的内容</div>
    </div>

    CSS:

    .active{
             border-bottom: 2px solid red;
            }
    .content .selected{
             display: block;
            }
      //active 用来显示下划线
      //selected 用来控制显示(默认都是隐藏的)

    JS:

     $(function(){
        $("ul>li").mouseenter(function(){
            //给li添加下横线
            $(this).addClass('active').siblings('li').removeClass('active');
            var index = $(this).index();
            //显示对应的div
            $('.tab').eq(index).addClass('selected').siblings('div').removeClass('selected');
        })
      });

    和原生JS一样利用排他思想。
    效果:
    这里写图片描述

    展开全文
  • 本文实例讲述了jQuery插件实现tab栏切换功能。分享给大家供大家参考,具体如下: 效果: 核心代码:自己写了一个方法,需要用的时候直接调用就可以了. 方法如下: (function ($) { //给$的fn添加方法 $.fn.tabs=...
  • jQuery Tab栏切换

    2016-11-04 15:13:48
    "jquery-1.11.3.min.js" > script > < script > $ ( function () { $ ( '.hd span' ) . mouseenter ( function () { //sibling兄弟,siblings兄弟们 //被鼠标经过的哪一个属性变为current,其他的...
  • initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>tab栏切换</title> <script src="../../jquery.min.js"></script> <style> * { margin: 0; padding: 0; /* 盒子大小为 width,...
  • jquery tab栏切换

    2019-01-23 14:34:00
    <li class="tab-item active">1◆</span></li> <li class="tab-item">2◆</span></li> <li class="tab-item">3◆</span></li> <li class="tab-item">4 <a href="###"><img src="imgs/1.jpg" alt=""/> ...
  • jQuery 实现tab切换效果

    2019-04-19 01:42:47
    NULL 博文链接:https://lxzqz.iteye.com/blog/1876715
  • jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名 添加类名 addClass() 删除类名 removeClass() 注意:使用这个方法,括号里面不需要再加那个小点,直接写类名就行了 比如说 <div class = ...
  • 第一个案例:  淘宝服饰精品案例   案例分析: ... 3、jQuery得到当前元素索引号$(this).index();  4、中间对应的图片,可以通过eq(index)方法去选择(eq(index)方法就是在已经选中的元素中再...
  • jQuery实现tab栏切换

    千次阅读 2018-08-18 21:52:52
    涉及到的知识点包括 为选择的元素增加序号、过滤选择器、排他思想、动态增加样式等。 代码如下: &lt;!DOCTYPE html&...tab栏切换&lt;/title&gt; &lt;style type="text/
  • jQuery样式操作 jQuery可以使用css修改简单样式,也可以使用类修改多个样式 修改简单样式: 参数只写属性名,则是返回属性值 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以...
  • jquery选项卡插件多种tab标签切换效果
  • 前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难。回来后,再把思路理一理,写一个,基础还是很重要的。 最终要实现的效果图如下: (1)点击tab栏显示...
  • <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none;... .
  • Tab切换栏(jQuery方法实现)

    千次阅读 2018-10-29 15:05:24
    <script type="text/javascript" src="jquery-1.4.2.js"> <div class="tab-box" style="border: 2px solid gray; width:339px;margin:10px auto;"> ;">公司动态</span><span>开学典礼</span><span>学员感言...
  • jQuery实现Tab栏切换

    2020-05-16 13:14:35
    HTML <div class="box"> <!-- 清除浮动 --> <ul class="clearfix"> <li class="active">手机</li> <li>美食</li> <...li style="border-right:
  • } style> <script src="./jquery-3.3.1.js">script> head> <body> <div class="box"> <ul id="one"> <li>1li> <li>2li> <li>3li> ul> <ul id="two"> <li class="current">li> <li>li> <li>li> ul> div> ...
  • 使用jquerytab栏切换

    2021-05-09 18:08:44
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...D.
  • 效果展示: 代码展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0px; padding: 0px;... .
  • Jquery实现tab栏切换

    2021-11-08 20:30:33
    $(".tab_ list li").click(function() { var index = $(this) .index(); console .1og(index); $(" .tab_ con . item" ).eq(index) . show( ). siblings().hide();//让下部里面相应索引号的item显示,其余的item隐藏...
  • 原理 通过点击不同的tab实现展示不同的界面的效果,主要是通过对显示不同界面的盒子进行隐藏以及显示来实现的。 效果图如下: ...<div class="box">...tab1</li> <li>tab2</li> <
  • Echarts带jQuery仿腾讯云产品列表滚动tab切换示例 Echarts带jQuery仿腾讯云产品列表滚动tab切换示例
  • jquery+css实现Tab栏切换

    万次阅读 多人点赞 2016-09-26 15:18:30
    本文利用jquery+css实现了简单的tab栏切换
  • jquery实现tab栏切换

    2018-08-08 18:02:43
    里面引入jquery.js <script src="jquery.js"></script> 2.css如下 <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper...
  • jQuery案例之tab栏切换

    2019-12-09 16:27:52
    <script src="jquery.min.js"> <div class="tab"> <div class="tab_list"> 商品介绍 规格与包装 售后保障 商品评价(50000) 手机社区 <div class="tab_con"> ;"> 商品介绍模块内容 规格与...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,432
精华内容 1,772
关键字:

jquerytab栏切换