2

最初のリンクをjavascriptでデフォルトとして選択したままにしておきたいのですが、これが私のコードです。現在、アクティブ状態とホバー状態が表示されています。ただし、最初のリンクはデフォルトで選択されたままにしておきたいので、ユーザーが2番目のリンクをクリックすると、最初のリンクは通常の状態になります。

<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 に答える