2016-10-15 8 views
0

site1のサイト2へのリンクをクリックし、リンクがクリックされている場合はそのページの隠しテキスト(ここではtext_1_toggle)を表示する必要があります。hrefリンクで別のページにリンクして、非表示のテキストを切り替える

P.S.私は、私はすぐに答えを理解していない場合は私を許しtopic..soこれにはかなり新しいです:)

SITE1:

<html> 
<head> 
</head> 
<body> 

    <a href="site2.htm#text_1_toggle">Click me!</a> 

</body> 
</html> 

サイト2:

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="toggle.js"></script> 
    <style> 
     h4:hover 
     { 
      cursor: pointer; 
      cursor: hand; 
     } 
     #text_1_toggle 
     { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
    <div id="site"> 
     <h4 id="text_1">Text 1</h4> 
     <span id="text_1_toggle">  
     1 some text... 
     </span> 

    <h4 id="text_2">Text 2</h4> 
     <span id="text_2_toggle">  
     2 some text... 
     </span> 
    </div> 
</body> 

toggle.js

jQuery("#site").ready(function() 
{ 
    jQuery("#text_1").click(function() 
    { 
    jQuery("#text_1_toggle").toggle(); 
    });  

    jQuery("#text_2").click(function() 
    { 
    jQuery("#text_2_toggle").toggle(); 
    }); 
}); 

答えて

0

効果はCSSで実現できます。

表示したい要素に:target疑似セレクタを使用する必要があります。

#text_1_toggle:target { 
    display: inline; 
} 
:これは、あなたが以下は、あなたのCSSに追加することができ、たとえば、URLでこのハッシュを使用する場合 #text_1_toggle要素( displayの設定を含め)あなたのスタイルにできることの選択肢を提供します
関連する問題