0
私はWeb開発に全く新しいので、それを心に留めてください。私は2つの質問をしました。 Nr1。検索バーの値から、その値を表すサイトのセクションまでスムーズにスクロールできますか？私はテストしましたスムーススクロールバーの入力を検索し、式の文字を除外する場合の値を比較した場合
$('html, body').animate({
scrollTop: $("#Nightmare").offset().top
}, 1000);
しかし、それは私の主な機能でのみ動作し、ページがロードされたときにはナイトメアセクションに移動しました。私はちょうど各セクションの私のsendToPage関数でそれを使用したいと思います。
私の2番目の質問は、式に一致するケース文字をより柔軟にしたい場合、それが解決策であるかどうかです。たとえば、悪夢を入力した場合の例ですが、誰かが悪夢や夜を入力した場合などは動作しません。
<!DOCTYPE html>
<head>
<title>A7X</title>
<meta charset="utf-8">
<link rel="stylesheet" href="a7x.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Ravi+Prakash" rel="stylesheet">
</head>
<body>
<h1 class="hide">Avenged Sevenfold lyrics</h1>
<header><h1>We have one collective hope: The Earth</h1><img src="../bilder/avenged_sevenfold___logo__1__png__deathbat_by_lightsinaugust-d5klaeb.png" alt="Avenged Sevenfolds logo"></header>
<nav>
<p>Album Search</p>
<form action="" onsubmit="return sendToPage()" method="post">
<input id="search" type="text" name="text" placeholder="Album name">
<input type="submit" value="Submit">
</form>
</nav>
<main>
<div class="wrapper">
<div class="ram" id="Stage">
<details>
<summary>Click here to make a song selection!</summary>
<li>The Stage</li>
<li>Paradigm</li>
<li>Sunny Disposition</li>
<li>God Damn</li>
<li>Creating God</li>
<li>Angels</li>
<li>Simulation</li>
<li>Higher</li>
<li>Roman Sky</li>
<li>Fermi Paradox</li>
<li>Exist</li>
</details>
<img src="../bilder/The-Stage-Album-Cover-sept8_CMYK.jpg" alt="The Stage album">
</div>
<div class="ram" id="Hail">
<details>
<summary>Click here to make a song selection!</summary>
<li>Shepherd of Fire</li>
<li>Hail to the King</li>
<li>Doing Time</li>
<li>This Means War</li>
<li>Requiem</li>
<li>Crimson Day</li>
<li>Heretic</li>
<li>Coming Home</li>
<li>Planets</li>
<li>Acid Rain</li>
<li>St. James</li>
</details>
<img src="../bilder/Hail-To-The-King.jpg" alt="Hail To The King Album">
</div>
<div class="ram" id="Nightmare">
<details>
<summary>Click here to make a song selection!</summary>
<li>Nightmare</li>
<li>Welcome to the Family</li>
<li>Danger Line</li>
<li>Buried Alive</li>
<li>Natural Born Killer</li>
<li>So Far Away</li>
<li>God Hates Us</li>
<li>Victim</li>
<li>Tonight the World Dies</li>
<li>Fiction</li>
<li>Save Me</li>
<li>Lost It All</li>
</details>
<img src="../bilder/Nightmare.jpg" alt="Nightmare Album">
</div>
<div class="ram" id="Self">
<details>
<summary>Click here to make a song selection!</summary>
<li>Critical Acclaim</li>
<li>Almost Easy</li>
<li>Scream</li>
<li>Afterlife</li>
<li>Gunslinger</li>
<li>Unbound (The Wild Ride)</li>
<li>Brompton Cocktail</li>
<li>Lost</li>
<li>A Little Piece of Heaven</li>
<li>Dear God</li>
<li>Crossroads</li>
</details>
<img src="../bilder/Avenged-Sevenfold.jpg" alt="Avenged Sevenfold Album">
</div>
<div class="ram" id="City">
<details>
<summary>Click here to make a song selection!</summary>
<li>Beast and the Harlot</li>
<li>Burn It Down</li>
<li>Blinded in Chains</li>
<li>Bat Country</li>
<li>Trashed and Scattered</li>
<li>Seize the Day</li>
<li>Sidewinder</li>
<li>The Wicked End</li>
<li>Strength of the World</li>
<li>Betrayed</li>
<li>M.I.A</li>
</details>
<img src="../bilder/City-Of-Evil.jpg" alt="City of Evil Album">
</div>
<div class="ram" id="Waking">
<details>
<summary>Click here to make a song selection!</summary>
<li>Waking the Fallen</li>
<li>Unholy Confessions</li>
<li>Chapter Four</li>
<li>Remenissions</li>
<li>Desecrate Through Reverence</li>
<li>Eternal Rest</li>
<li>Second Heartbeat</li>
<li>Radiant Eclipse</li>
<li>I Won't See You Tonight (Part 1)</li>
<li>I Won't See You Tonight (Part 2)</li>
<li>Clairvoyant Disease</li>
<li>And All Things Will End</li>
</details>
<img src="../bilder/Waking-The-Fallen.jpg" alt="Waking the Fallen Album">
</div>
<div class="ram" id="Sound">
<details>
<summary>Click here to make a song selection!</summary>
<li>To End the Rapture</li>
<li>Turn the Other Way</li>
<li>Darkness Surrounding</li>
<li>The Art of Subconscious Illusion</li>
<li>We Come Out at Night</li>
<li>Lips of Deceit</li>
<li>Warmness on the Soul</li>
<li>An Epic of Time Wasted</li>
<li>Breaking Their Hold</li>
<li>Forgotten Faces</li>
<li>Thick and Thin</li>
<li>Streets</li>
<li>Shattered by Broken Dreams</li>
</details>
<img src="../bilder/Sounding-The-Seventh-Trumpet.jpg" alt="Sounding the Seventh Trumpet Album">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="animation.js"></script>
</div>
</body>
</html>
**Javascript**
function main() {
var $body = $("body").hide();
$("body").fadeIn(1000);
$('summary').each(function(){
$(this).nextAll().wrapAll('<div class="slide"></div>');
});
$('details').attr('open','').find('.slide').css('display','none');
$('summary').click(function(e) {
e.preventDefault();
$(this).siblings('div.slide').slideToggle(function(){
$(this).parent('details').toggleClass('open');});
});
}
$(document).ready(main);
function sendToPage(){
var input = document.getElementById("search").value;
switch(input){
case "nightmare":
location.replace("#Nightmare");
break;
case "the stage":
location.replace("#Hail");
break;
case "self":
location.replace("#Self");
break;
case "city":
location.replace("#City");
break;
case "waking":
location.replace("#Waking");
break;
case "sound":
location.replace("#Sound");
break;
default:
alert("No matching albums, try again!");
location.replace("file:///C:/inetpub/wwwroot/projektbrackets/AvengedSevenfold/index.html");
break;
}
}
**CSS**
* > {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
width: 100%;
background-color: #2c382d;
font-size: 130%;
}
header img {
display: block;
margin: auto;
max-width: 30%;
min-width: 25%;
border: none;
}
input {
width: 100%;
}
nav {
width: 159px;
margin: 0 auto;
text-align: center;
min-width: 404px;
color: white;
}
header {
background-color: #647155;
text-align: center;
font-family: 'Cormorant Garamond', serif;
}
.ram img {
width: 300px;
height: auto;
display: block;
}
.wrapper {
max-width: 100vw;
min-width: 388px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 40px;
align-items: flex-start;
}
.ram {
margin: 10px 0;
}
input {
width: 155px;
}
summary {
background-color: black;
color: white;
padding: 4px;
border: 1px blue solid;
border-radius: 3px;
text-align: center;
font-size: 89%;
}
li {
background-color: #212121;
color: white;
list-style-type: none;
text-align: center;
margin-right: 5px;
font-family: 'Ravi Prakash', cursive;
}
header {
min-width: 420px;
}
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
h1 {
margin: 0;
}
summary::-webkit-details-marker {
display: none;
}
summary:before {
content: "►";
}
details.open summary:before {
content: "▼";
}
li:nth-child(odd){background-color: crimson;}
偉大な答えの男！私の2番目の質問についての良いアイデア？ :) – Adam