javascript - 如何从另一个页面链接到特定的 javascript 选项卡？

Question

我正在尝试从目录页面链接到页面上的特定选项卡。我似乎找不到一种对我来说有意义的方法。请耐心听我说，因为我对编写 javascript 还很陌生。

我使用的 HTML 是这样的。

<ul id="tabs">
        <li><a href="#website">Website</a></li>
        <li><a href="#facebook">Facebook</a></li>
        <li><a href="#twitter">Twitter</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#pub">Pub/Marketing</a></li>
    </ul>
    <div class="tabContent" id="website"><!--=================== Tab 1 ===================-->
        <h2>Website</h2>
        <h3>Website Redesign</h3>
        <p>For the new website, August 31st to September 30th:</p>
        <ul>
            <li>Bounce Rate: 23.59%</li>
            <li>Pageviews: 2,258</li>
        </ul>
        <p>Bounce rate is indicative of a massive improvement: the current website has a 40% bounce rate.</p>
        <h3>Most Popular Content</h3>
        <table id="popular_content" class="basic">
            <tr>
                <th>Page</th>
                <th>Page Views</th>
                <th>Bounce Rate</th>
                <th>% Exit</th>
            </tr>
            <tr>
                <td>/lrc/tutoring</td>
                <td>658</td>
                <td>18.47%</td>
                <td>21.88%</td>
            </tr>
            <tr class="odd">
                <td>/lrc/tutoring/tutors</td>
                <td>189</td>
                <td>50%</td>
                <td>85.19%</td>
            </tr>
            <tr>
                <td>/lrc/</td>
                <td>172</td>
                <td>25.45%</td>
                <td>26.74%</td>
            </tr>
        </table>
        <h3>LRC Mobile Website</h3>
        <p>For September, 2012:</p>
        <ul>
            <li>Visits: 162</li>
            <li>Unique Visitors: 73</li>
            <li>Pageviews: 286</li>
        </ul>
    </div> <!-- end of outreach_website div -->
    <div class="tabContent" id="facebook"><!--=================== Tab 2 ===================-->
        <h2>Facebook</h2>
        <table id="facebook_likes" class="basic">
            <tr>
                <th>Month</th>
                <th>Likes</th>
                <th>Friends of Fans</th>
            </tr>
            <tr>
                <td>July 2012</td>
                <td>78</td>
                <td>22,428</td>
            </tr>
            <tr class="odd">
                <td>Aug 2012</td>
                <td>84</td>
                <td>22,100</td>
            </tr>
        </table>
        <br />
        <img src="images/example_300x100.jpg" id="facebook_graph" style='max-width: 600px; height: auto;' />
        <img src="images/example_600x200.jpg" id="facebook_graph" style='max-width: 600px; height: auto;' />
        <img src="images/example_1200x400.jpg" id="facebook_graph" style='max-width: 600px; height: auto;' />
        <p>Popularity metrics from 7/19/12 to 10/1/12.<br />
        Definitions of the metrics are in the Facebook Page Insights product guide.</p>
        <br />
    </div><!-- end of outreach_facebook div -->

javascript如下:

    /*
tabs.js
Chesapeake College
Monthly Statistics
author: Seamus O'Brien
created: 9-13-13
*/

var tabLinks = new Array();
var contentDivs = new Array();

function init() {
    //Grab the tab links and content divs from the page
    var tabListItems = document.getElementById('tabs').childNodes;
    for ( var i = 0; i < tabListItems.length; i++ ) {
        if (tabListItems[i].nodeName == "LI") {
            var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
            var id = getHash( tabLink.getAttribute('href') );
            tabLinks[id] = tabLink;
            contentDivs[id] = document.getElementById( id );
        }
    }

    //Assign onclick events to the tab links, and
    //highlight the first tab
    var i = 0;

    for( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur()};
        if (i == 0 ) tabLinks[id].className = 'selected';
        i++;
    }

    //Hide all content divs except the first
    var i = 0;

    for( var id in contentDivs ) {
        if ( i !=0 ) contentDivs[id].className='tabContent hide';
        i++;
    }
}

// ShowTab Function

function showTab() {
    var selectedId = getHash( this.getAttribute('href') );

    //Highlight the selected tab, and dim all others.
    //Also show the selected content div, and hide all others.
    for ( var id in contentDivs ) {
        if ( id == selectedId ) {
            tabLinks[id].className = 'selected';
            contentDivs[id].className = 'tabContent';
        } else {
            tabLinks[id].className ='';
            contentDivs[id].className = 'tabContent hide';
        }
    }

    //Stop the Browser following the link.
    return false;
}

function getFirstChildWithTagName( element, tagName ) {
    for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
    }
}

function getHash(url) {
    var hashPos = url.lastIndexOf( '#' );
    return url.substring(hashPos + 1);
}

Answer 1

在等待答案的过程中，我想出了在 JavaScript 中添加几行的解决方案。对于那些需要它的人，这是最终版本。

var tabLinks = new Array();
var contentDivs = new Array();

function init() {
//Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
    if (tabListItems[i].nodeName == "LI") {
        var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
        var id = getHash( tabLink.getAttribute('href') );
        tabLinks[id] = tabLink;
        contentDivs[id] = document.getElementById( id );
    }
}

//Assign onclick events to the tab links, and
//highlight the first tab
var i = 0;

for( var id in tabLinks ) {
    tabLinks[id].onclick = showTab;
    tabLinks[id].onfocus = function() { this.blur()};
    if (i == 0 ) tabLinks[id].className = 'selected';
    i++;
}

//Hide all content divs except the first
var i = 0;

for( var id in contentDivs ) {
    if ( i !=0 ) contentDivs[id].className='tabContent hide';
    i++;
}

//Show linked tab
if ( document.location.hash ) showTab( document.location.hash.substring(1) );
} // end of init function

// ShowTab Function

function showTab(selectedId) {
if ( typeof selectedId != 'string' ) var selectedId = getHash(this.getAttribute('href') );

//Highlight the selected tab, and dim all others.
//Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
    if ( id == selectedId ) {
        tabLinks[id].className = 'selected';
        contentDivs[id].className = 'tabContent';
    } else {
        tabLinks[id].className ='';
        contentDivs[id].className = 'tabContent hide';
    }
}

//Stop the Browser following the link.
return false;
} //end of showTab function

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash(url) {
var hashPos = url.lastIndexOf( '#' );
return url.substring(hashPos + 1);
}