2

我想将第一个链接保留为使用 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;
}
4

2 回答 2

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; 
}
于 2012-06-21T05:50:24.267 回答
0

如果您使用的是 ExtJS，那么您可以这样做：

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

这假设标记如下：

​&lt;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;
}​

​有关操作 Ext 元素的更多文档，请参阅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：​</p> 

<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> ​​​​​​​​​​​​​​​​​​​​​​
于 2012-06-21T06:18:22.383 回答