JavaScriptをオンにしてボタンをクリックしてCSS内のマーキーを入力する

私はjavascriptで新しく、私の学校の仕事を終わらせるのに苦労しています。これは私の現在のコードです：JavaScriptをオンにしてボタンをクリックしてCSS内のマーキーを入力する

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    background-color: white; 
    width: 200px; 
    border: 25px solid blue; 
    padding: 25px; 
    margin: 25px; 
    position: relative; 
    left: 35%; 
} 
h2 { 
    text-align: center; 
    } 
</style> 
<body> 
<br><br> 
<button onclick="myFunction()">Sunday</button><br> 
<button onclick="myFunction2()">Monday</button><br> 
<button onclick="myFunction3()">Tuesday</button><br> 
<button onclick="myFunction4()">Wednesday</button><br> 
<button onclick="myFunction5()">Thursday</button><br> 
<button onclick="myFunction6()">Friday</button><br> 
<button onclick="myFunction7()">Saturday</button><br> 
<p id="demo"></p> 

<script> 
function myFunction() { 
    document.getElementById("demo").innerHTML ="<div><h2>Sunday</h2></div>"; 
} 
function myFunction2() { 
    document.getElementById("demo").innerHTML = "<div><h2>Monday</h2></div>"; 
} 
function myFunction3() { 
    document.getElementById("demo").innerHTML = "<div><h2>Tuesday</h2>  </div>"; 
} 
function myFunction4() { 
    document.getElementById("demo").innerHTML = "<div><h2>Wednesday</h2>  </div>"; 
} 
function myFunction5() { 
    document.getElementById("demo").innerHTML = "<div><h2>Thursday</h2></div>"; 
} 
function myFunction6() { 
    document.getElementById("demo").innerHTML = "<div><h2>Friday</h2>  </div>"; 
} 
function myFunction7() { 
    document.getElementById("demo").innerHTML = "<div><h2>Saturday</h2>  </div>"; 
} 
</script> 

</body> 
</html>

青長方形の形状は、右のいずれかのボタンをクリックした後のページの上から下に行く、それはちょうどそれに触れるようbotttomに到達した後、色することがありますボックスの反転が必要です。私が知っているのは、マーキーですが、私はそれのための適切なコードを知らないです。私はこれがたくさんあることを知っています。それが私が助けを求めている理由です。コメントは大歓迎されている:)おかげ

出典

2016-12-14 maymail09

あなただけの最初のボタンをクリックした後、下にスライドするボックスをしたい場合は、このコードはあなたのためにそれを行います。これが、

function myFunction() { 
 
    document.getElementById("demo").innerHTML ="<div><h2>Sunday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#40A824"; 
 
} 
 
function myFunction2() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Monday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#003399"; 
 
} 
 
function myFunction3() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Tuesday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#9233DF"; 
 
} 
 
function myFunction4() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Wednesday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#CA4B98"; 
 
} 
 
function myFunction5() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Thursday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#5DA233"; 
 
} 
 
function myFunction6() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Friday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#5B1C5A"; 
 
} 
 
function myFunction7() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Saturday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#F4292A"; 
 
}

div { 
 
    background-color: white; 
 
    width: 200px; 
 
    border: 25px solid blue; 
 
    padding: 25px; 
 
    margin: 25px; 
 
    position: relative; 
 
    left: 35%; 
 
} 
 
h2 { 
 
    text-align: center; 
 
} 
 

 
#demo { 
 
    position: absolute; 
 
    margin-top: -387px; 
 
    transition: .5s; 
 
}

<br><br> 
 
<button onclick="myFunction()">Sunday</button><br> 
 
<button onclick="myFunction2()">Monday</button><br> 
 
<button onclick="myFunction3()">Tuesday</button><br> 
 
<button onclick="myFunction4()">Wednesday</button><br> 
 
<button onclick="myFunction5()">Thursday</button><br> 
 
<button onclick="myFunction6()">Friday</button><br> 
 
<button onclick="myFunction7()">Saturday</button><br> 
 
<p id="demo"></p>

をフルスクリーンブラウザで動作しますが、サイズの異なる画面では信頼できるソリューションではありません。コードスニペットを実行すると、望ましくない結果が得られるので、コードをコピーしてHTMLページに貼り付けるとよいでしょう。

出典

2016-12-14 15:07:08

JavaScriptをオンにしてボタンをクリックしてCSS内のマーキーを入力する

答えて

関連する問題