0
我正在学习Javascript/jQuery，并试图使其在点击提交按钮后，网站展开并显示与搜索相关的信息（我还没有但是，我正在使用一个测试div来显示它会去哪里，它并没有完全显示，但网站不扩大，没有滚动功能显示。网站没有扩大到显示jQuery隐藏的信息
<!DOCTYPE html>
<html lang="end">
<head>
<meta charset="utf-8" />
<title>League of Legends Summoner Stats</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="center">
<select class="region_selector">
<option value="NA">North America</option>
<option value="EUW">EU West</option>
<option value="EUNE">EU East</option>
<option value="KR">Korea</option>
</select>
</div>
<div id="title">
<h1>LoL Stat Find</h1>
</div>
<div id="subtitle">
<h3>Quickly Find Summoner Stats!</h3>
</div>
<button type="submit" id="search_button">Search</button>
<input name="summoner_name" type="text" maxlength="512" id="summoner_name" placeholder="Summoner Name" class="summoner" />
<script src="script.js"></script>
<div id="stats">
<section id="main">
<h1>THIS IS A TEST</h1>
some more testing
<br>this is another test
<br>another
</section>
</div>
</body>
</html>
这是CSS：
body {
background-image: url("background.jpg");
width: 100%;
background-size: 100%;
}
.region_selector {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
/* bring your own prefixes */
transform: translate(-100%, -50%);
display: inline;
}
#summoner_name {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(5%, -50%);
display: inline;
}
.summoner {
font-size: 14px;
border-width: 2px;
border-radius: 5px;
}
#search_button {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 100%);
display: inline-block;
margin: 0 10px 0 0;
padding: 5px 15px;
font-size: 15px;
color: white;
background-color: #1947D1;
font-family: Tahoma;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 5px;
border-color: #1947D1;
}
#title {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -110%);
display:inline;
color: white;
font-size: 48px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#subtitle {
position: fixed;
top: 50%;
left: 50%;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -130%);
font-family: tahoma;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
display: inline;
color: #009933;
font-style: bold;
}
#stats {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 200%);
}
这是JavaScript：
$(function() {
$("#stats").hide();
});
document.getElementById('search_button').onclick = function() {
var search = document.getElementById('summoner_name').value;
$(function() {
$("#stats").show();
});
}
我是新来的HTML/CSS/JS所以我的代码可能是各种各样的搞砸。
http://jsfiddle.net/arunpjohny/样式pq41ps8c / –