Question

我有以下程序，基本上只是一个花哨的清单。但是，我需要通过网站上其他页面上的链接链接到该程序的特定部分。这是程序的样子：

这是HTML＆amp;相对于程序的JavaScript：

<div id="container">
      <!--Horizontal Tab-->
      <div id="parentHorizontalTab">
          <ul class="resp-tabs-list hor_1">
              <li>Where are peanuts made?</li>
              <li>How are peanuts made?</li>
              <li>Do I like peanuts?</li>            
          </ul>
          <div class="resp-tabs-container hor_1">
              <div><p>This page consists of helpful peanuts</p></div>
      <div><p>
                      <!--vertical Tabs-->

                      <div id="ChildVerticalTab_1">
                          <ul class="resp-tabs-list ver_1">
                            <li>In what country are peanuts made?</li>
                            <li>How do they transport peanuts?</li>
                        </ul>
                        <div class="resp-tabs-container ver_1">
                            <div>
                                <p>Please refer to        <a>Page                       1</a>the             peanut guide, a bunch of random stuff about peanuts here
</p>
                            </div>

 $(document).ready(function() {
    //Horizontal Tab
    $('#parentHorizontalTab').easyResponsiveTabs({
        type: 'default', //Types: default, vertical, accordion
        width: 'auto', //auto or any width like 600px
        fit: true, // 100% fit in a container
        tabidentify: 'hor_1', // The tab groups identifier
        activate: function(event) { // Callback function if tab is switched
            var $tab = $(this);
            var $info = $('#nested-tabInfo');
            var $name = $('span', $info);
            $name.text($tab.text());
            $info.show();
        }
    });

    // Child Tab
    $('#ChildVerticalTab_1').easyResponsiveTabs({
        type: 'vertical',
        width: 'auto',
        fit: true,
        tabidentify: 'ver_1', // The tab groups identifier
        activetab_bg: '#fff', // background color for active tabs in this group
        inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
        active_border_color: '#c1c1c1', // border color for active tabs heads in this group
        active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
    });

            $('#ChildVerticalTab_2').easyResponsiveTabs({
        type: 'vertical',
        width: 'auto',
        fit: true,
        tabidentify: 'ver_2', // The tab groups identifier
        activetab_bg: '#fff', // background color for active tabs in this group
        inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
        active_border_color: '#c1c1c1', // border color for active tabs heads in this group
        active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
    });

基本上我们有一个带有垂直选择的表格布局，以及在右侧窗口中显示某些内容的水平布局。用户选择他们想要的水平主要类别，然后选择他们想要的特定问题，以在右侧的框中显示答案。

显然，我可以使用ID选择器链接到页面的特定部分。问题是我需要自动打开一个涉及特定问题的特定选项卡和相应的侧面选项卡。

例如，我在另一个页面上有一个问题，上面写着“他们在哪个国家制作花生”，当页面加载时我希望页面加载打开“How are peanuts made”标签，最好是“In什么国家的花生制成“垂直标签。

我相信我的JavaScript需要一个事件属性，只是不确定在这个场景中使用什么事件属性。

显然我把脚本的某些部分遗漏了，有些内容我不能在这里发布是其背后的原因。此外，实际上没有关于花生的网站上工作：）

Answer 1

我们的想法是将所需的水平和垂直标签放在网址的哈希部分中，如下所示：http://example.com/some/page#1/2此示例中的1是水平标签的索引，2是垂直的索引标签。一般哈希模式为{zero-based-index}/{zero-based-index}。当文档加载时，解析url的哈希值，然后模拟单击哈希选择的选项卡（如果有）。

<script>
$(document).ready(function() {
    var selectedTabs = getTabsFromHash(window.location.hash);
    if(!selectedTabs)  {
        return;
    }

    $('#parentHorizontalTab > ul > li:eq(' + selectedTabs.horizontalTab + ')').click();
    $('#ChildVerticalTab_1 > ul > li:eq(' + selectedTabs.verticalTab + ')').click();
});

function getTabsFromHash(hash)
{
  var matchedParts = /(\d+)\/(\d+)/i.exec(hash);
   if(matchedParts !== null){
      return {
         horizontalTab: matchedParts[1],
         verticalTab: matchedParts[2],
      };
   }

    return null;
}
</script>

请参阅演示：https://jsfiddle.net/xt66ee5k/

需要链接到javascript程序的特定部分吗？

1 个答案: