Fatal编程技术网
  • javascript/
  • Javascript html+；css+；js组合在Google Chrome或Safari浏览器中无法正常工作

Javascript html+；css+；js组合在Google Chrome或Safari浏览器中无法正常工作

javascript jquery html css

Javascript html+；css+；js组合在Google Chrome或Safari浏览器中无法正常工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,免责声明：这是一个来自“python程序员学习jQuery”的问题 我有以下简单的html结构（文件名：index.html）： 为了完整起见，这里是我的.css文件（文件名：stylesheet.css）： 现在，我将所有这三个脚本都放在同一个目录中，在将index.html文件打开到safari和Google chrome中时，切换功能不起作用。它用于测试 有人能解释一下为什么会发生这种情况吗。更好的是，如果你能发现问题或它为什么不起作用，那就太好了。不可能确切地说出它为什么不起作用-但我敢

免责声明：这是一个来自“python程序员学习jQuery”的问题

我有以下简单的html结构（文件名：index.html）：

为了完整起见，这里是我的.css文件（文件名：stylesheet.css）：

现在，我将所有这三个脚本都放在同一个目录中，在将index.html文件打开到safari和Google chrome中时，切换功能不起作用。它用于测试

有人能解释一下为什么会发生这种情况吗。更好的是，如果你能发现问题或它为什么不起作用，那就太好了。

不可能确切地说出它为什么不起作用-但我敢打赌，这一行没有分号：

$（'.panel'）。滑动切换（'slow'）

尝试检查控制台是否有错误

编辑：

看起来您忘记包含jQuery了。在依赖jQuery的脚本之前，将脚本添加到
：

您不需要提供文件的完整路径，但首先需要包括jQuery

更改此部分：

<head>
    <title>astrobox.io | Welcome!</title>
    <script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script>
    <link rel="stylesheet" type="text/css" href="/Users/iMacHome/astroboxio/stylesheet.css"></link>
</head>


astrobox.io欢迎！
到


astrobox.io欢迎！
我已经添加了google cdn，但是您也可以通过链接到本地副本来包含jquery。

确保您已经添加了jquery，或者您有正确的脚本顺序（首先是jquery，然后是脚本）。 例如：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script>
如果您忘记包含jquery脚本或库，那么使用jquery将无法工作

看起来您忘记包含jQueryAh是的，在我的开发环境中已经安装了此库。我要试试这个！在所有建议的编辑中，它仍然没有在我的Safari或Google Chrome浏览器中本地加载…在使用jQuery时效果很好：我也在使用JSFIDLE。在那里工作很好。只是不在本地。选民们。。请建议改进或解释我的答案有什么问题？谢谢@j08691，我不知道@正如我刚才所说，我不知道它们是可选的（在某些情况下）。@Billy你欠我们你的底薪…：）@迈克尔：我本想赌我的最后一块钱——我很高兴我没有这么做！；）我试了简略版和完整版。我是否需要以某种方式将jQuery加载到index.html文件中？是的，@MichaelRoberts我已经添加了一个指向google的cdnHi Manos的链接，正如你所说，我已经包括了这个，但是它仍然不起作用。你能试着在你的本地机器上测试它吗？你必须使用我使用的顺序。首先是jquery链接，然后是你的脚本。我也在本地机器上测试过，它工作得非常好！秩序就是一切！js脚本之前的jQuery。谢谢你。 
body {
    margin:0 auto;
    padding:0;
    width:800px;
    text-align:center;
}

.pull-me{
    -webkit-box-shadow: 0 0 8px #562cd4;
    -moz-box-shadow: 0 0 10px #562cd4;
    box-shadow: 0 0 10px #562cd4;
    cursor:pointer;
}
.panel {
    background: #000000;
    background-size:90% 90%;
    height:380px;
    display:none;
    color:#ffffff;
    font-family:basic,arial,sans-serif;
}
.panel p{
    text-align:center;
}
.slide {
    margin:0;
    padding:0;
    border-top:solid 2px #562cd4;
}
.pull-me {
    display:block;
    position:relative;
    right:-25px;
    width:150px;
    height:20px;
    font-family:basic,arial,sans-serif;
    font-size:14px;
    color:#ffffff;
    background:#562cd4;
    text-decoration:none;
    -moz-border-bottom-left-radius:5px;
    -moz-border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.pull-me p {
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<head>
    <title>astrobox.io | Welcome!</title>
    <script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script>
    <link rel="stylesheet" type="text/css" href="/Users/iMacHome/astroboxio/stylesheet.css"></link>
</head>

<head>
    <title>astrobox.io | Welcome!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script>