JQuery动态添加多个tab页标签

这篇博客展示了如何利用jQuery实现动态添加多个tab页标签的功能。用户点击左侧菜单会新增对应内容的tab页,同时提供了添加、删除tab页的JQuery代码实现。通过示例代码,解释了如何处理tab的显示、隐藏以及内容加载。
摘要由CSDN通过智能技术生成

JQuery动态添加多个tab页标签

jQuery是一个兼容多浏览器的js库,核心理念是write less,do more(写的更少,做的更多),jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

  自己用到的一个主页多标签的小例子,用户登录后显示自己的相应菜单和我的主页。

代码如下:

 <div>
        <div class="content_bottom">

        <div id="left" class="content_left">
             
            <div>
               <ul id="list1">
                   
                  <li class='left_current'>
                        <a class='top' id="index1" href='#'>菜单页</a> 
                  </li>
               </ul>
           </div>
            <div>
                <a class='tab'  href='#' name="1.aspx" rel="index2" οnclick="addTab(this)" >菜单2</a> 
           </div>
            <div>
                <a class='tab'  href='#'  name="Login.aspx" rel="index3" οnclick="addTab(this)">菜单3</a> 
           </div>

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供 jQuery 实现同时展示多个 tab 标签并且支持左右箭头滚动的代码。 首先,您需要一个包含 tab 标签的容器元素,如下所示: ```html <div class="tab-container"> <ul class="tabs"> <li class="active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> <li>Tab 4</li> <li>Tab 5</li> <li>Tab 6</li> <li>Tab 7</li> <li>Tab 8</li> <li>Tab 9</li> <li>Tab 10</li> </ul> </div> ``` 接着,您可以使用以下 CSS 样式来设置容器元素及其子元素的样式: ```css .tab-container { position: relative; overflow: hidden; width: 500px; /* 设置容器宽度 */ } .tabs { display: flex; padding: 0; margin: 0; list-style: none; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; /* 在移动设备上启用平滑滚动效果 */ } .tabs li { flex-shrink: 0; margin-right: 10px; padding: 10px; background-color: #eee; cursor: pointer; } .tabs li.active { background-color: #ccc; } ``` 最后,您可以使用以下 jQuery 代码来实现左右箭头滚动功能: ```javascript $(document).ready(function() { var tabContainer = $('.tab-container'); var tabs = $('.tabs'); var tabWidth = tabs.outerWidth(); // 获取每个 tab 元素的宽度 var containerWidth = tabContainer.outerWidth(); // 获取容器元素的宽度 var maxScroll = tabs.outerWidth() - containerWidth; // 计算最大滚动距离 var scrollStep = tabWidth * 2; // 设置每次滚动的距离 // 左箭头点击事件 $('.prev').click(function() { var scrollLeft = tabs.scrollLeft(); var newScrollLeft = Math.max(scrollLeft - scrollStep, 0); tabs.animate({ scrollLeft: newScrollLeft }, 500); }); // 右箭头点击事件 $('.next').click(function() { var scrollLeft = tabs.scrollLeft(); var newScrollLeft = Math.min(scrollLeft + scrollStep, maxScroll); tabs.animate({ scrollLeft: newScrollLeft }, 500); }); }); ``` 上述代码使用 jQuery 的 `scrollLeft()` 方法来获取和设置滚动距离,使用 `animate()` 方法来平滑滚动到指定位置。同时,还需要计算出容器元素和每个 tab 元素的宽度以及最大滚动距离和每次滚动的距离。 注意,您需要在 HTML添加左右箭头的元素,并为它们添加对应的类名(如 `.prev` 和 `.next`),并在 CSS 中设置它们的样式。 希望这个代码对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值