如何链接到其他页面上特定的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); 
}