隠蔽/表示部

（ ".about"）をクリックすると、（ ".aboutPage"）を表示/非表示します。開始時にdivが表示されます。ページが読み込まれると非表示にならないので、hide（）にこれを組み込むにはどうすればいいですか？助けてください。私はdivのサイズや何かがないことを知っている、私は3つのすべての作業を取得した後にそれを行うでしょう。あなたはマッチした要素を表示または非表示にするためにtoggleメソッドを使用する必要が隠蔽/表示部

.aboutPage { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <h1 class="title">Name Goes Here</h1> 
 
    <br> 
 
    <div class="menu"> 
 
    <h1 class="about">About Me</h1> 
 
    <h1 class="projects">Projects</h1> 
 
    <h1>Contact Me</h1> 
 
    </div> 
 
    <div class="aboutPage"> Here it Is</div> 
 
</div>

出典

2017-01-29 ZeroCalm

$（ドキュメント）.ready（関数（）{ $（バニラJSでそれを行うだろうかです".about"）。click（function（）{ $（ ".aboutPage"）.togg le（）; }）; }）; – ZeroCalm

申し訳ありませんが、私の答えに見ている元の投稿 – ZeroCalm

JSを忘れてしまった。 –

。

.about要素のイベントハンドラをbindにする必要があります。 $('.aboutPage').hide();

またはcssを使用して：：

あなたは確かにこれを行うにはjQueryのを使用 "することができます"、それがある

.aboutPage{ 
    display:none; 
}

$('.aboutPage').hide(); 
 
$('.about').click(function(){ 
 
    $('.aboutPage').toggle(); 
 
});

.aboutPage{ 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <div class="container"> 
 
     <h1 class="title">Name Goes Here</h1> 
 
     <br> 
 
     <div class="menu"> 
 
      <h1 class="about">About Me</h1> 
 
      <h1 class="projects">Projects</h1> 
 
      <h1>Contact Me</h1> 
 
     </div> 
 
     <div class="aboutPage"> Here it Is</div> 
 
     </div> 
 
    </body>

出典

2017-01-29 20:57:20

divページのロード時に非表示にするに

必要はありません。

（注：私は、彼らがここにコードスニペットウィンドウに収まるだけのようp要素に最後の3つのh1要素を変更しました。）：説明のコメントをインラインで参照してください

// Get references to DOM objects needed to work the problem: 
 
var a = document.querySelector(".about"); 
 
var ap = document.querySelector(".aboutPage"); 
 

 
// Add a "click" event handler to the .about element 
 
a.addEventListener("click", function(){ 
 
    
 
    // If .aboutPage is hidden, show it - otherwise hide it. 
 
    // Do this by adding or removing the .hide class. 
 
    if(ap.classList.contains("hide")){ 
 
    ap.classList.remove("hide"); 
 
    } else { 
 
    ap.classList.add("hide"); 
 
    } 
 
});

.aboutPage{ 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
} 
 

 
.hide { display:none; }

<div class="container"> 
 
     <h1 class="title">Name Goes Here</h1> 
 
     <div class="menu"> 
 
      <p class="about">About Me</p> 
 
      <p class="projects">Projects</p> 
 
      <p>Contact Me</p> 
 
     </div> 
 
     <div class="aboutPage hide"> Here it Is</div> 
 
</div>

出典

2017-01-29 20:58:20

jQueryを使用すると、要素を非表示にするクラスを切り替えることができます。ここ

$('.about').on('click',function() { 
 
    $('.aboutPage').toggleClass('hide'); 
 
})

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h1 class="title">Name Goes Here</h1> 
 
    <br> 
 
    <div class="menu"> 
 
    <h1 class="about">About Me</h1> 
 
    <h1 class="projects">Projects</h1> 
 
    <h1>Contact Me</h1> 
 
    </div> 
 
    <div class="aboutPage"> Here it Is</div> 
 
</div>

そして、あなたは

document.getElementsByClassName('about')[0].addEventListener('click',function() { 
 
    document.getElementsByClassName('aboutPage')[0].classList.toggle('hide'); 
 
})

.hide { 
 
    display: none; 
 
}

<div class="container"> 
 
    <h1 class="title">Name Goes Here</h1> 
 
    <br> 
 
    <div class="menu"> 
 
    <h1 class="about">About Me</h1> 
 
    <h1 class="projects">Projects</h1> 
 
    <h1>Contact Me</h1> 
 
    </div> 
 
    <div class="aboutPage"> Here it Is</div> 
 
</div>

出典

2017-01-29 20:58:21

答えて

関連する問題