2016-04-11 1 views
0

は、私は次のコードを得たが、私は副情報が互いにスポイラーは、私は、行がクリックされた副情報を得ることができますテーブルを作成しようとしている

とは別に表示させることはできません

#spoiler, #close { 
 
    display: none; 
 
} 
 
#show:target #spoiler { 
 
    display: table-row; 
 
} 
 
#show:target #open { 
 
    display: none; 
 
} 
 
#show:target #close { 
 
    display: block; 
 
}
<div id="show"> 
 
    <table> 
 
    <tr> 
 
     <td> <a href="#show" id="open" class="trigger open">Company 1</a> 
 
      <a href="#hide" id="close" class="trigger close">Company 1</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td id="spoiler" class="spoiler">Company 1 Information</td> 
 
    </tr> 
 
    <tr> 
 
     <td> <a href="#show" id="open" class="trigger open">Company 2</a> 
 
      <a href="#hide" id="close" class="trigger close">Company 2</a>   </td> 
 
    </tr> 
 
    <tr> 
 
     <td id="spoiler" class="spoiler">Company 2 Information</td> 
 
    </tr> 
 
</table> 
 
</div>

+2

idsは一度しか使用できません:その理由: –

答えて

0
<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
    function toggle_visibility(id){ 
     var e = document.getElementById(id); 
     if(e.style.display == 'none') 
      e.style.display = 'block'; 
     else 
      e.style.display = 'none'; 
    } 
    </script> 
</head> 
<div id="show"> 
    <table> 
    <tr> 
     <td> <a href="#" id="openOne" onclick="toggle_visibility('showOne');">Company 1</a> 
    </tr> 
    <tr> 
     <td id="showOne" style="display:none">Company 1 Information</td> 
    </tr> 
    <tr> 
     <td> <a href="#" id="openTwo" onclick="toggle_visibility('showTwo');">Company 2</a> 
    </tr> 
    <tr> 
     <td id="showTwo" style="display:none">Company 2 Information</td> 
    </tr> 
</table> 
</div> 
</html> 

javascriptを使用すると、より簡単で簡単です。

0

あなたは、複数の要素に同じIDを使用しています。あなたは彼らのIDを互いに分離する必要があります、これはあなたの問題を解決します。

+0

私に簡単な例を教えてください。私はここで本当に失われている – Racana

+0

JavaScriptを使用するには何か問題はありますか? –

+0

いいえ、私はJSを知りませんが、私は学びたい – Racana

関連する問題