我想保持第一個鏈接作爲默認選擇與JavaScript

Question

我想保持第一個鏈接默認選擇與JavaScript，這裏是我的代碼。目前它顯示活動狀態和懸停狀態。但我想保持第一鏈路作爲默認選擇，當上第二個鏈接點擊用戶第一個鏈接會在其正常狀態：

<table width=100% height=20% border=0 cellspacing=0 cellpadding=0 
     style=margin:20px> 
<tr> 
    <td> 
    <a onclick="selectElement(this)" 
     href=javascript:getBasicInfoPanel(); 
     style=font-weight:normal 
     class="linkbold">Basic</a></td> 
</tr> 
<tr> 
    <td style=padding-top:5px;> 
    <a onclick="selectElement(this)" 
     href=javascript:getNetworkPanel(); 
     style=font-weight:normal 
     class="linkbold">Network</a></td> 
</tr> 
<tr> 
    <td style=padding-top:5px;> 
    <a onclick="selectElement(this)" 
     href=javascript:getNetworkPanel2(); 
     style=font-weight:normal 
     class="linkbold">Basic3</a> 
    <td> 
</tr> 
</table> 

var selectedElement; 
function selectElement(elem) { 
    /* Select new element */ 
    elem.attributes["class"].value = "linkbolds"; 
    /* Unselect currently selected */ 
    if (selectedElement) { 
     selectedElement.attributes["class"].value = "linkbold"; 
    } 
    selectedElement = elem; 
} 

Answer 1

或許這就是你所需要的 -

var selectedElement; 
function selectElement(elem) {  
    /* Select new element */  
    elem.className = "linkbolds";//used className instead of attributes["class"].value 

    /* Unselect currently selected */  
    if (selectedElement) {   
     selectedElement.className = "linkbold";//used className instead 
    }  

    selectedElement = elem; 
} 

Answer 2

如果您正在使用ExtJS的，那麼你就可以做到這一點是這樣的：

Ext.select('a').on('click', function(e, target){ 
    Ext.select('a').removeCls('linkbold'); 
    Ext.get(target).addCls('linkbold'); 
}, null, {preventDefault:true});​ 

這是假設的標記，如：

​<ul id="menu"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
</ul> 

而且我們說像一些CSS：

​a { 
    display: block; 
    background-color: #ccc; 
    color: #fff; 
    padding: 2px; 
    text-decoration: none; 
} 

a.linkbold { 
    background-color: #c00; 
}​ 

見http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element更多的文檔上操作分機元素。

---

編輯

更新的JavaScript：

Ext.onReady(function(){ 

    Ext.select('table a').on('click', function(e, target){ 
     Ext.select('table a').removeCls('linkbold'); 
     Ext.get(target).addCls('linkbold'); 
    }, null, {preventDefault:false}); 

}); 

更新HTML：

<table width="100%" height="20%" border="0" cellspacing="0" cellpadding="0" 
     style="margin:20px"> 
<tr> 
    <td> 
    <a href="javascript:getBasicInfoPanel();" 
     style="font-weight:normal" 
     class="linkbold">Basic</a></td> 
</tr> 
<tr> 
    <td style="padding-top:5px;"> 
    <a href="javascript:getNetworkPanel();" 
     style="font-weight:normal">Network</a></td> 
</tr> 
<tr> 
    <td style="padding-top:5px;"> 
    <a href="javascript:getNetworkPanel2();" 
     style="font-weight:normal">Basic3</a> 
    <td> 
</tr> 
</table> ​​​​​​​​​​​​​​​​​​​​​​