bugfix> javascript > 投稿

アンカー要素がクリックされたとき。コンテンツを持つ2つのdiv要素を表示する必要があります(たとえば、非表示から表示に)。

だからこれは私がやっている私のコードですが、何もうまくいかないので、その方法を助けてください。

<div>     
  <a href="#one #onesection" class="parentclass">One</a>
<div>
<div id="one" class="childclass"></div>
<div id="onesection" class="subchildclass">this is mysection first</div>

私の友人の一人がこの解決策を手伝ってくれましたが、何も機能しません:-

<a class="parentclass" onClick="openDivs()">One</a>
function openDivs() {
  let child = document.getElementById('one');
  let subChild = document.getElementById('onesection');
}

これでletで構文エラーが発生しましたが、機能していません。チェックして問題の解決方法を教えてください。私が間違っているところ事前に感謝します。

回答 3 件
  • これ、純粋なJavaScriptを試してください。

    function openDivs()
    {
        document.getElementById("one").style.display="Block";
        document.getElementById("onesection").style.display="Block";
    }
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
     <div>     
         <a onclick="openDivs()" class="parentclass">One</a>
         <div>
         <div id="one" class="childclass" style="display:none">hiiiii</div>
         <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
        </div>
        </div>
    </body>
    </html>
    
    

    open関数openDivs(e)   {       $(e.getAttribute( 'href'))。show();   }
    <div>     
     <a onclick="openDivs(this)" href="#one,#onesection" class="parentclass">One</a>
     <div>
     <div id="one" class="childclass" style="display:none">ttttt</div>
     <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
    </div>
    
    

  • jqueryで.show()を使用して、非表示のhtml要素を表示できます。ここでは、2つのdivが最初に非表示になっている必要があります。つまり、ページが読み込まれたときです。 これがあなたのhtmlパーツです

    <html>
      <div id="outer_container">
        <div class="main_parent" id="parent1">     
             <a class="parentclass" >One</a>
             <div>
               <div id="one" class="childclass" style="display:none">hiiiii</div>
               <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
            </div>
        </div>
        <div class="main_parent" id="parent2">     
          <a class="parentclass">two</a>
          <div>
             <div id="one" class="childclass" style="display:none">hiiiii</div>
             <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
          </div>
        </div>
    
        <div class="main_parent"  id="parent3">     
           <a class="parentclass">three</a>
           <div>
             <div id="one" class="childclass" style="display:none">hiiiii</div>
             <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
          </div>
        </div>
      </div>
    </html>
    
    

    これがスクリプト/ jQueryパーツです

    jQuery(document).ready(function($) {
        $('.parentclass').click(function(event){
          var clicked_id = $(this).closest('.main_parent').attr('id');
            $('#'+clicked_id).find('#one,#onesection').show();
            $('#outer_container').find('.main_parent:not(#'+clicked_id+')').find('#one,#onesection').hide();
        });
    });
    
    

    エラーもあります。最初の <div> を閉じていません  アンカータグが配置される場所。

    これは更新しました jsfiddle: https://jsfiddle.net/melvinstanly/g8am7owh/19/

  • @crazy以下のソリューションで試してください

    <!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $(".parentclass").click(function(){
                   $('.childclass').hide();
                   $('.subchildclass').hide();
                   var parentID = $(this).parent().prop("id");
                   $("#" + parentID + " .childclass").show();
                   $("#" + parentID + " .subchildclass").show();
               });
            });
        </script>
    </head>
    <body>
        <div id="section1">     
            <a class="parentclass" href="#">One</a>
            <div>
                <div class="childclass" style="display:none">hiiiii1</div>
                <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
            </div>
        </div>
        <div id="section2">     
            <a href="#" class="parentclass">two</a>
            <div>
                <div class="childclass" style="display:none">hiiiii2</div>
                <div id="onesection" class="subchildclass" style="display:none">this is mysection second</div>
            </div>
        </div>  
        <div id="section3">     
            <a href="#" class="parentclass">three</a>
            <div>
                <div class="childclass" style="display:none">hiiiii3</div>
                <div id="onesection" class="subchildclass" style="display:none">this is mysection Third</div>
            </div>
        </div>
    </body>
    </html>
    
    

あなたの答え