使用js更改默认选项卡和页面

Question

我是网页设计的初学者。我需要一些专业人士来帮助我解决这个问题。

下面是我用来创建TABS的JS。我已经更改了默认选项卡，但是我仍然无法弄清楚如何更改默认选项卡页面。请帮忙 ！！！

<script type="text/javascript"> 
//<![CDATA[ 

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["order"].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++; 
    } 
} 

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 = 'active'; 
     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); 
} 

//]]> 
</script> 

这是标签

<ul id="tabs"> 
     <li><a href="#features">Product Features</a></li> 
     <li><a class="selected" href="#order">Order UNIFY Sutures</a> </li> 
     <li><a href="#spec">Specifications</a></li> 
     <li><a href="#testi">Testimonials</a></li> 
     <li><a href="#overview">Suture Overview</a></li> 

    </ul> 

Answer 1

更改您的代码在这里

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

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

零在列表中的if语句if (i != 0)定义的活动标签页。

你也可以看看jquery ui tabs这是做你想做的，很容易使用。

Answer 2

更换showTab功能与此：

function showTab() { 
    var selectedId = getHash(this.getAttribute('href'));  
    selectTab(selectedId); 
    return false; 
} 

function selectTab(selectedId) { 

    // 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 = 'active'; 
     contentDivs[id].className = 'tabContent'; 
    } else { 
     tabLinks[id].className = ''; 
     contentDivs[id].className = 'tabContent hide'; 
    } 
    } 
} 

然后，选择一个特定的标签，称这样的事情：

selectTab('spec'); 

编辑：改变selectTab（ '＃规格'）;选择Tab（'spec'）;

JSFiddle