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;
}

有关操作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：

<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>

我想保留第一个链接作为默认选择与JavaScript

2 个答案: