HTML / JS: как показать выбранный <li>контент

Question

У меня есть некоторые проблемы с моими кодами. У меня есть две страницы: страница A и страница B. На странице B есть 9 основных кнопок, каждая из которых имеет свой URL. Из 9 кнопок есть кнопка, которая будет перенаправлять на страницу B. Ниже приведен текущий код кнопки на странице A, которая будет перенаправлять на страницу B.

Страница A. html

<div class="main-enquiry">
    <div class="inner">
        <h1>Send Us Your Enquiry</h1>
        <div class="marginTop">
            <div class="col4 left"><a href="/community/"></a>
                <div class="circleicon"><a href="/community/"></a><a href="/community/"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/i-foundation.png" /></a></div>
                    <h5><a style="color: rgb(0, 0, 0); line-height: 1.2; font-size: 1.1em; font-weight: 600;" href="/community/">TG Foundation</a></h5>
                </div>
            </div>
        </div>
    </div>
</div>

После перенаправления на страницу B на странице B есть 3 основные вкладки. Первая вкладка будет по умолчанию, то есть содержимое первой вкладки будет отображаться первым. Теперь я хочу, чтобы после перенаправления на страницу B я по умолчанию выбрал третью вкладку.

Ниже приведен код страницы B

Страница B. html

( function( window ) {
    'use strict';
    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }
    function CBPFWTabs( el, options ) {
        this.el = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }
    CBPFWTabs.prototype.options = {
        start : 0
    };
    CBPFWTabs.prototype._init = function() {
        // tabs elems
        this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
        // content items
        this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > section' ) );
        // current index
        this.current = -1;
        // show current content item
        this._show();
        // init events
        this._initEvents();
    };
    CBPFWTabs.prototype._initEvents = function() {
        var self = this;
        this.tabs.forEach( function( tab, idx ) {
            tab.addEventListener( 'click', function( ev ) {
                ev.preventDefault();
                self._show( idx );
            } );
        } );
    };
    CBPFWTabs.prototype._show = function( idx ) {
        if( this.current >= 0 ) {
            this.tabs[ this.current ].className = this.items[ this.current ].className = '';
        }
        // change current
        this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
        this.tabs[ this.current ].className = 'tab-current';
        this.items[ this.current ].className = 'content-current';
    };
    // add to global namespace
    window.CBPFWTabs = CBPFWTabs;
})( window );

<div class="tabs tabs-style-iconfall">
    <nav>
        <ul>
            <li><a class="icon" href="#section-iconfall-1">First Tab</a></li>
            <li><a class="icon" href="#section-iconfall-2">Second Tab</a></li>
            <li><a class="icon" href="#section-iconfall-3">Third Tab</a></li>
        </ul>
    </nav>
</div>

Ниже приведен скриншот страницы B

Где первая вкладка и ее содержат по умолчанию. Мне нужна вкладка красного круга и ее содержимое по умолчанию.

Кто-нибудь может мне помочь?

Answer 1

Я думаю, что вы должны добавить событие window.onload для страницы B, в которую вы можете поместить logi c, чтобы выбрать третью вкладку по умолчанию

window.onload = function() {
    //your tab selection logic here, put your existing code here which navigates to 3rd tab
}

Answer 2

Вы можете просто добавить фрагмент, как в следующем фрагменте:

<div class="main-enquiry">
    <div class="inner">
        <h1>Send Us Your Enquiry</h1>
        <div class="marginTop">
            <div class="col4 left">
                <a href="/community/#section-iconfall-3"></a>
                <div class="circleicon">
                    <a href="/community/#section-iconfall-3"></a>
                    <a href="/community/#section-iconfall-3"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/i-foundation.png" /></a>
                </div>
                <h5><a style="color: rgb(0, 0, 0); line-height: 1.2; font-size: 1.1em; font-weight: 600;" href="/community/#section-iconfall-3">TG Foundation</a></h5></div>
        </div>
    </div>
</div>

update: 1 : если у вас есть контроль над файлом js, то вы можете просто отредактировать этот чанк и установите начальное значение 2:

CBPFWTabs.prototype.options = {
  start: 2,
};

Это быстрый обходной путь, и его следует реализовать, используя вместо этого location.hash.

обновление 2 : следующая реализация кода использует location.hash для установки вкладки по умолчанию для cbpFWTabs, я просто добавил чанк, чтобы проверить, включен ли идентификатор вкладки в URL ha sh,

...
if (idx === undefined) {
  this.items.forEach(function (el, i) {
    if (el.id === location.hash.substr(1)) {
      tabs.current = i;
    }
  });
}
...

Здесь приведена полная реализация файла, просто замените его, а затем в <a> добавьте #section-iconfall-3 к концу атрибута href, поэтому он должен ссылаться на community/#section-iconfall-3

/**
 * cbpFWTabs.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function (window) {
  "use strict";

  function extend(a, b) {
    for (var key in b) {
      if (b.hasOwnProperty(key)) {
        a[key] = b[key];
      }
    }
    return a;
  }

  function CBPFWTabs(el, options) {
    this.el = el;
    this.options = extend({}, this.options);
    extend(this.options, options);
    this._init();
  }

  CBPFWTabs.prototype.options = {
    start: 0,
  };

  CBPFWTabs.prototype._init = function () {
    // tabs elems
    this.tabs = [].slice.call(this.el.querySelectorAll("nav > ul > li"));
    // content items
    this.items = [].slice.call(
      this.el.querySelectorAll(".content-wrap > section")
    );
    // current index
    this.current = -1;
    // show current content item
    this._show();
    // init events
    this._initEvents();
  };

  CBPFWTabs.prototype._initEvents = function () {
    var self = this;
    this.tabs.forEach(function (tab, idx) {
      tab.addEventListener("click", function (ev) {
        ev.preventDefault();
        self._show(idx);
      });
    });
  };

  CBPFWTabs.prototype._show = function (idx) {
    let tabs = this;
    if (this.current >= 0) {
      this.tabs[this.current].className = this.items[this.current].className =
        "";
    }
    // change current
    this.current =
      idx != undefined
        ? idx
        : this.options.start >= 0 && this.options.start < this.items.length
        ? this.options.start
        : 0;

    if (idx === undefined) {
      this.items.forEach(function (el, i) {
        if (el.id === location.hash.substr(1)) {
          tabs.current = i;
        }
      });
    }

    this.tabs[this.current].className = "tab-current";
    this.items[this.current].className = "content-current";
  };

  // add to global namespace
  window.CBPFWTabs = CBPFWTabs;
})(window);