Question

我创建了一个小导航，可以使用jquery在不同的样式表之间切换，但是一旦我将脚本从页面移出并移到单独的文件中，它们就不再响应。

$(document).ready(function() {
    // teal stylsheet
    $("#cssTeal").click(function() {
        $("link[rel=stylesheet]").attr({href : "stylesheetteal.css"});
    });

    // pink stylesheet
    $("#cssPink").click(function() {
        $("link[rel=stylesheet]").attr({href : "stylesheetpink.css"});
    });

    // yellow stylesheet
    $("#cssYellow").click(function() {
        $("link[rel=stylesheet]").attr({href : "stylesheetyellow.css"});
    });

});



<html>
<head>
<meta charset="UTF-8"/>
<title>Mission Statement</title>
<link href="stylesheetteal.css" rel="stylesheet" type="text/css" media="all" id="teal"/>
<link href="stylesheeetpink.css" rel="alternate stylesheet" type="text/css" media="all" id="pink"/>
<link href="stylesheetyellow.css" rel="alternate stylesheet" type="text/css" media="all" id="yellow"/>
<link href="scripts.js" rel="external" type="text/javascript"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<style type="text/css">
</style>

</head>

<body>
<div id="themes">
    <div class="indiv"><a id="cssTeal" href="#teal"><img src="assets/tealcircle.png"></a></div>
    <div class="indiv"><a id="cssPink" href="#pink"><img src="assets/pinkcircle.png"></a></div>
    <div class="indiv"><a id="cssYellow" href="#yellow"><img src="assets/yellowcircle.png"></a></div>
</div>

Answer 1

问题在于已加载脚本的顺序以及用于加载自定义脚本的标记。您正在使用link标签而不是script标签。

尝试一下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<script src="scripts.js"></script>

还要在结束</body>标记之前添加所有脚本标记。脚本会阻止内容加载，因此您应该最后添加它们，以免脚本阻止其余内容加载。

将我的脚本移至外部页面，它们不再响应

1 个答案: