javascript - HTML / JS：如何显示选中内容

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页的截图

第一个选项卡及其默认包含的位置。我希望红色圆圈选项卡及其内容为默认值。

谁能帮我？

标签： javascripthtmljquerycss

Answer 1

我认为您应该为页面 B 添加 window.onload 事件，您可以在其中放置逻辑以选择第三个选项卡作为默认值

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