时间戳

首页 > 解决方案 > 基于 URL 的 Jquery Tabs 添加/切换类

javascript - 基于 URL 的 Jquery Tabs 添加/切换类

问题描述

我用 jQuery 设置了一些选项卡，但我想添加基于 URL 更改选项卡的功能。理想情况下，一旦 URL 后面跟着 id/data-attribute，浏览器就会滚动到相应的部分并且选项卡会打开。

        $(document).ready(function(){

$('.gdlr-session-item-head-info').click(function(){
    if( $(this).hasClass('gdlr-active') ) return;
    $(".gdlr-session-item-head-info").removeClass('gdlr-active');


    $('html, body').animate({
        scrollTop: $(".gdlr-tab-session-item").offset().top-200
    }, 1000);

    var selected_tab = $(this).attr('data-tab');
    var current_day = $(this).attr('current-day');
    $(".currentDay-"+current_day).addClass('gdlr-active');

    $('.gdlr-session-item-head').siblings('.gdlr-session-item-tab-content').hide();
    $('.gdlr-session-item-head').siblings('.' + selected_tab).fadeIn();
});

}

HMTL

<div class="session-item-wrapper" id="agendaroduct" style="margin-bottom: 10px;">
<div class="gdlr-session-item gdlr-tab-session-item gdlr-item">
   <div class="gdlr-session-item-head">
      <a href="agenda/#currentDay-1">
         <div id="currentDay-1" class="gdlr-session-item-head-info  currentDay-0 gdlr-active" current-day="0" data-tab="gdlr-tab-1">
            <div class="gdlr-session-head-day">Pre-Day</div>
            <div class="gdlr-session-head-date">Tue, Nov 5</div>
         </div>
      </a>
      <a href="agenda/#currentDay-2">
         <div id="currentDay-2" class="gdlr-session-item-head-info currentDay-1" current-day="1" data-tab="gdlr-tab-2">
            <div class="gdlr-session-head-day">Day 1</div>
            <div class="gdlr-session-head-date">Wed, Nov 6</div>
         </div>
      </a>
      <a href="agenda/#currentDay-3">
         <div id="currentDay-3" class="gdlr-session-item-head-info  currentDay-2" current-day="2" data-tab="gdlr-tab-3">
            <div class="gdlr-session-head-day">Day 2</div>
            <div class="gdlr-session-head-date">Thu, Nov 7</div>
         </div>
      </a>
      <div class="clear"></div>
   </div>
   <div>
      <div class="clear"></div>
   </div>
   <div class="gdlr-session-item-tab-content gdlr-tab-1 " style="display: block;">                                                          content goes here
   </div>
   <div class="gdlr-session-item-tab-content gdlr-tab-2 gdlr-active" style="display: none;">                                                                                                                                                                                                                                                                    content goes here                   
   </div>
   <div class="gdlr-session-item-tab-content gdlr-tab-3 " style="display: none;">                   conten goes here
   </div>
   <div class="gdlr-session-item-head end">
      <div class="gdlr-session-item-head-info  currentDay-0 gdlr-active" current-day="0" data-tab="gdlr-tab-1">
         <div class="gdlr-session-head-day">Pre-Day</div>
         <div class="gdlr-session-head-date">Tue, Nov 5</div>
      </div>
      <div class="gdlr-session-item-head-info currentDay-1" current-day="1" data-tab="gdlr-tab-2">
         <div class="gdlr-session-head-day">Day 1</div>
         <div class="gdlr-session-head-date">Wed, Nov 6</div>
      </div>
      <div class="gdlr-session-item-head-info  currentDay-2" current-day="2" data-tab="gdlr-tab-3">
         <div class="gdlr-session-head-day">Day 2</div>
         <div class="gdlr-session-head-date">Thu, Nov 7</div>
      </div>
      <div class="clear"></div>
   </div>
   <div class="clear"></div>
</div>

任何帮助将不胜感激。谢谢！

标签： javascriptjqueryurltabs

解决方案

您需要找到一种将散列值连接到 DOM 元素的方法。在您的情况下，您id的选项卡触发器上的属性与此匹配，并且还包含相关信息以显示正确的选项卡以及其他功能（正如您在点击事件中所展示的那样）。

您可以将选项卡更改逻辑分离为一个函数，然后可以通过单击事件和页面加载调用该函数，方法是将预期的选项卡作为参数显示。

function showTab(element) {
  if (element.hasClass("gdlr-active")) return;

  $(".gdlr-session-item-head-info").removeClass("gdlr-active");

  $("html, body").animate({
    scrollTop: $(".gdlr-tab-session-item").offset().top - 200
  }, 1000);

  var selected_tab = element.attr("data-tab");
  var current_day = element.attr("current-day");
  $(".currentDay-" + current_day).addClass("gdlr-active");

  $('.gdlr-session-item-head').siblings(".gdlr-session-item-tab-content").hide();
  $('.gdlr-session-item-head').siblings("." + selected_tab).fadeIn();
}

然后，您的单击处理程序将被绑定调用该函数...

$('.gdlr-session-item-head-info').click(function(){
  showTab($(this));
})

当页面加载时，您可以验证 URL 中的哈希是否是可用的 DOM 元素并将其也发送到您的函数。

$(document).ready(function () {
  if (window.location.hash) {
    var targetTab = $(window.location.hash)
    if (targetTab.length) {
      showTab(targetTab);
    }
  }
})

推荐阅读