如何从另一个页面链接到特定的javascript选项卡?
我试图从目录页面链接到页面上的特定选项卡。我似乎找不到一个对我有意义的方法。请容忍我,因为我对编写javascript相当陌生 我使用的HTML是这样的如何从另一个页面链接到特定的javascript选项卡?,javascript,html,tabs,Javascript,Html,Tabs,我试图从目录页面链接到页面上的特定选项卡。我似乎找不到一个对我有意义的方法。请容忍我,因为我对编写javascript相当陌生 我使用的HTML是这样的 <ul id="tabs"> <li><a href="#website">Website</a></li> <li><a href="#facebook">Facebook</a></li>
<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 -->
网站
网站重新设计
对于8月31日至9月30日的新网站:
- 反弹率:23.59%
- 浏览量:2258
跳出率表明了一个巨大的进步:目前的网站有40%的跳出率
最受欢迎的内容
页
页面浏览量
反弹率
%出口
/lrc/辅导
658
18.47%
21.88%
/lrc/辅导/导师
189
50%
85.19%
/法改会/
172
25.45%
26.74%
LRC移动网站
2012年9月:
- 浏览人数:162
- 独特访客:73
- 浏览量:286
脸谱网
月
喜欢
粉丝之友
2012年7月
78
22,428
2012年8月
84
22,100
2012年7月19日至2012年10月1日的人气指标。
这些指标的定义见《Facebook页面洞察产品指南》
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);
}
/*
tabs.js
切萨皮克学院
每月统计数字
作者:希默斯·奥布莱恩
创建日期:9-13-13
*/
var tabLinks=新数组();
var contentDivs=新数组();
函数init(){
//从页面抓取选项卡链接和内容div
var tabListItems=document.getElementById('tabs').childNodes;
对于(变量i=0;i
在等待答案时,我想出了一个解决方案,在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);
}
var tabLinks=new Array();
var contentDivs=新数组();
函数init(){
//从页面抓取选项卡链接和内容div
var tabListItems=document.getElementById('tabs').childNodes;
对于(变量i=0;i