ディレクトリ ページからページ上の特定のタブにリンクしようとしています。私には意味のあるこれを行う方法が見つからないようです。私は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);
}