我正在制作一个随机名称生成器，我希望在用户单击按钮时显示一个随机的名称。但每当用户点击按钮时，我的内容就会在屏幕上短暂闪烁。
<!DOCTYPE html>
<html>
<head>
<title>Grand National 2016 Randomizer</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<section class="hero">
<div class="row intro">
<div class="small-centered medium-uncentered medium-6 large-7 columns">
<h1>Grand National 2016</h1>
<div id="submit">
<form method ='post'>
<input type='submit' name='submit'>
</form>
</div>
<p>
<?php
$horses = array();
// pushing all the runners of the 2016 Grand National
array_push($horses, "Many Clouds");
array_push($horses, "MaSilviniaco Conti");
array_push($horses, "First Lieutenant");
array_push($horses, "Wonderful Charm");
array_push($horses, "Ballynagour");
array_push($horses, "O'Faolains Boy");
array_push($horses, "Gilgamboa");
array_push($horses, "On His Own");
array_push($horses, "The Druids Nephew");
array_push($horses, "Triolo D'Alene");
array_push($horses, "Rocky Creek");
array_push($horses, "Sir Des Champs");
array_push($horses, "Holywell");
array_push($horses, "Shutthefrontdoor");
array_push($horses, "Soll");
array_push($horses, "Buywise");
array_push($horses, "Boston Bob");
array_push($horses, "Aachen");
array_push($horses, "Morning Assembly");
array_push($horses, "Double Ross");
array_push($horses, "Goonyella");
array_push($horses, "Ucello Conti");
array_push($horses, "Unioniste");
array_push($horses, "Le Reve");
array_push($horses, "Gallant Oscar");
array_push($horses, "Onenightinvienna");
array_push($horses, "The Last Samuri");
array_push($horses, "Kruzhlinin");
array_push($horses, "Rule The World");
array_push($horses, "Just A Par");
array_push($horses, "Katenko");
array_push($horses, "Vics Canvas");
array_push($horses, "Black Thunder");
array_push($horses, "Ballycasey");
array_push($horses, "Hadrian's Approach");
array_push($horses, "Vieux Lion Rouge");
array_push($horses, "Pendra");
array_push($horses, "Saint Are");
array_push($horses, "Home Farm");
array_push($horses, "The Romford Pele");
array_push($horses, "Knock House");
array_push($horses, "Bishops Road");
array_push($horses, "Pineau De Re");
array_push($horses, "Alvarado");
array_push($horses, "Highland Lodge");
array_push($horses, "Maggio");
array_push($horses, "Perfect Candidate");
array_push($horses, "Present View");
//sorting Array
sort($horses);
// Randomly select a winner!
$counter = count($horses) - 1;
$random = rand(0, $counter);
print $horses[$random];
?>
</p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS：
.hero {
background-image: url("image.jpg");
background-size: cover;
height: 99vh; }
.hero:before {
height: 100%;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #ccffdd, black);
opacity: .8; }
.hero .intro {
padding: 3rem;
position: relative;
top: 50%;
transform: translateY(-50%); }
.hero h1 {
color: #fff;
font-size: 1.5rem;
line-height: 1.5em;
letter-spacing: -0.025em;
font-weight: 300;
text-align: center; }
.hero p {
color: #fff;
line-height: 1.75em;
font-weight: 200;
text-align: center;
margin-bottom: 2rem; }
@media only screen and (min-width: 40.063em) {
.hero h1 {
text-align: center;
font-size: 2.5rem; }
.hero p {
color: gold;
text-align: center;
font-size: 1.5rem;
display: none;}
#submit {
text-align: center;
}}
这是我的Jquery代码：
$(function() {
$("#submit").on("click", function(){
$('p').show();
});
});
按照以下步骤简单操作：
注意：我不是在写完整的代码，只是想告诉你该做什么。
在您的PHP文件中，如index.php:
<?php
// your data array
$horses = array("Many Clouds", "MaSilviniaco Conti" /* ... */);
?>
<!DOCTYPE html>
.
.
.
<a href="index.php">Get Random</a>
<p> <?=$horses[ rand(0, count($horses) - 1) ]?> </p>
.
.
.
它不需要像jQuery和。。。除非您将拥有一些额外的JavaScript功能，比如通过使用xhr从服务器端检索数据，或者在客户端动态操作DOM，或者与用户操作交互。
这是因为您正在单击的元素实际上是一个<input type='submit' />按钮，并导致页面提交/发布到服务器。
如果你想防止这种默认行为发生，你可以在jQuery调用中使用e.preventDefault()函数：
$(function() {
$("#submit").on("click", function(e){
// Stop the default behavior (submission)
e.preventDefault();
$('p').show();
});
});
需要注意的是，这可能会导致您的<form>无法按预期提交，因此，如果您仍然需要，则可能需要调整您的使用情况。
使用以下内容。发生这种情况是因为表单提交并刷新了页面。你需要像下面的一样使用e.preventdefault
<script>
$( "a" ).click(function( event ) {
event.preventDefault();
$( "<div>" )
.append( "default " + event.type + " prevented" )
.appendTo( "#log" );
})；