HTML / JS：如何顯示選中<li>內容</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

您可以像下面的代碼片段一樣添加片段：

<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>

更新： 1 ：如果您可以控制 js 文件，那么您只需編輯此塊並將 start 設置為2的值：

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

這是一個快速的解決方法，應該使用location.hash來實現。

更新 2 ：以下代碼實現使用location.hash設置cbpFWTabs的默認選項卡，我只是添加了一個塊來檢查選項卡 id 是否包含在 URL Z0800FC577294C334E452B 中

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

這是完整的文件實現，只需替換它，然后在<a> append #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);

Answer 2

我認為您應該為頁面 B 添加 window.onload 事件，您可以在其中將邏輯放入 select 3rd tab 作為默認值

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