Question

我正在处理我正在使用的这个自定义搜索引擎的自定义部分。 “设置背景图片”适用于Codecadamey的网站，但是当我在Chrome中打开它时却没有。另外两个自定义部分不起作用，我希望有人可以告诉我什么是错的或给我一些提示/资源来解决这个问题。提前致谢！这是代码：

<!DOCTYPE html>
<html>
<head>
<title>Custom Search</title>
<style type="text/css">
* { margin: 0; padding: 0; }
html { 
background: url("http://cdn.desktopwallpapers4.me/wallpapers/movies/1920x1080/2/12424-darth-vader-star-wars-1920x1080-movie-wallpaper.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

td {text-align:center;}


#page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }

p { font: 15px/2 Times New Roman; margin: 0 0 30px 0; text-indent: 40px; }
.srch {padding: 20px 0px 200px 0px;}

.header {font: Times New Roman; color: white; text-align: center; padding: 300px 0px 0px 0px; font-size: 550%; line-height: 40%;}
.pbg {color: white; text-align: center;}

.button {width:75px;}

.tst1 {height:50px; width:150px; background-color:blue; cursor:pointer;}

/*the panel that slides down*/
.panel {height:120px; width:100%; background-color:#dddddd; position:relative;}

.tab {height:18px; width:75px; margin:auto; background-color:#cccccc; border-bottom-left-radius:15px; border-bottom-right-radius:15px; border:2px outset #aaaaaa; text-align:center; cursor:pointer;}

.altbut {padding:5px; width:156px}


</style>





<script type="text/javascript">

function background() {

var bkgrnd =  $("input[name=background_url]").val();

$("style").append("html {background: url('" + bkgrnd + "') no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}");
};


function link() {

var url = $("input[name=link_url]").val();

var name = $("input[name=button_name]").val();

$("span").append("<button type='button' class='button' onclick='window.location='" + url + "'>" + name + "</button>");
};


function head() {

var headerName = $("input[name=header_text]").val()

$(".header").empty()

$(".header").append("'" + headerName + "'")
}


$(document).ready(function(){
$('.tab').click(function(){
$('.panel').slideToggle('slow');
});
});



</script>


</head>




<body>



<div class="panel"><center>
<table>
<tr>
    <td>Change the background</td>
    <td>Add a link</td>
    <td>Change the header</td>
</tr>
<tr>
    <td><input type="text" name="background_url" placeholder="Paste a URL..."/></td>

    <td><input type="text" name="link_url" placeholder="Paste a URL..."/></td>

    <td><input type="text" name="header_text" placeholder="Header"/></td>
</tr>
<tr>
    <td><button class="altbut" onclick="background()">Set background picture</button></td>

    <td><input type="text" name="button_name" placeholder="Button name"</td>

    <td><button class="altbut" onclick="head()">Set the Header</button></td>
</tr>

<tr>
    <td></td>
    <td><button class="altbut" onclick="link()">Add link button</button></td>
</tr>
</table>

</div></center>






<div class="tab">Customize</div>

<iframe width="0" height="0" src="http://www.youtube.com/embed/3F4vRmro50U?autoplay=1" frameborder="0"></iframe>

<div class="header">Who's Your Daddy?</div>
<br>
<div class="pbg">(Powered By Google)</div>
<div class="srch">
<center>
<form method="get" action="http://www.google.com/search">
<div>
<input type="text" name="q" size="100" placeholder="What are you looking for?">
<button type="submit" class="button">Search</button>
</div></form></center>
</div>
<hr>



<center>
<span>

<button type="button" class="button" onclick="window.location='https://mail.google.com/mail/?tab=wm#inbox'">Gmail</button>

<button type="button" class="button" onclick="window.location='https://www.facebook.com/'">Facebook</button>

<button type="button" class="button" onclick="window.location='https://www.youtube.com/?tab=w1'">Youtube</button>

<button type="button" class="button" onclick="window.location='http://www.ebay.com/'">eBay</button>

<button type="button" class="button" onclick="window.location='https://www.google.com/imghp?hl=en&amp;tab=wi'">Images</button>

<button type="button" onclick="test()">Customize</button>

</span>
</center>


</body></html>

Answer 1

您尚未附加jQuery库。您可以在当前脚本之前添加以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

为什么这个JQuery / Javascript不起作用？

1 个答案: