Can'；不能从JSFIDLE使用JQuery吗？_Jquery

Can'；不能从JSFIDLE使用JQuery吗？

jquery

Can'；不能从JSFIDLE使用JQuery吗？,jquery,Jquery,我找到了我需要的答案，但是当我把它放在一个文档中时，我无法让它工作。我从未使用过JQuery，所以它对我来说非常陌生。请帮忙这就是我的代码在文档中的样子 <html> <head> <title>Example</title> </head> <body> <script> $('.parent div').hide(); $('#nav a').click(function() { console

我找到了我需要的答案，但是当我把它放在一个文档中时，我无法让它工作。我从未使用过JQuery，所以它对我来说非常陌生。请帮忙

这就是我的代码在文档中的样子

<html>
<head>
<title>Example</title>
</head>
<body>
<script>
$('.parent  div').hide();

$('#nav a').click(function() {
    console.log($(this).index('a'));
    var $div = $('.parent > div').eq($(this).index('#nav a'));
    $div.show();
    $('.parent > div').not($div).hide();
});
</script>
<!--Footer and Navigation Div's-->
<div id="bg"><img src="images/bg.jpg" alt=""></div>
    <div id="footer">
        <p>S.E. <span>yoga</span></p>
            <div id="nav">
                <ul><a href="#">Link 1</a></ul>
                <ul><a href="#">Link 2</a></ul>
                <ul><a href="#">Link 3</a></ul>
                <ul><a href="#">Link 4</a></ul>
            </div>
    </div>

<!--END Footer and Navigation Div's-->

<div class="parent">
    <div class="a">
        <p>this is a</p>
    </div>   
    <div class="b">
        <p>this is b</p>
    </div>
    <div class="c">
        <p>this is c</p>
    </div>
    <div class="d">
        <p>this is d</p>
    </div>
</div>
</body>
</html>


例子
$（'.parent div'）.hide（）；
$（'#导航a'）。单击（函数（）{
console.log（$（this.index（'a'））；
var$div=$（'.parent>div'）.eq（$（this）.index（'#nav a'））；
$div.show（）；
$（'.parent>div'）。而不是（$div.hide（）；
});
S.E.瑜伽




这是一个
这是b
这是c
这是d

问题1：您没有包括jQuery

问题2：您必须将脚本放在html的下面，就在结束标记的前面。如果按现在的方式运行脚本，则找不到您拥有的两个选择器

<head>
<title>Example</title>
</head>
<body>

<!--Footer and Navigation Div's-->
<div id="bg"><img src="images/bg.jpg" alt=""></div>
    <div id="footer">
        <p>S.E. <span>yoga</span></p>
            <div id="nav">
                <ul><a href="#">Link 1</a></ul>
                <ul><a href="#">Link 2</a></ul>
                <ul><a href="#">Link 3</a></ul>
                <ul><a href="#">Link 4</a></ul>
            </div>
    </div>

<!--END Footer and Navigation Div's-->

<div class="parent">
    <div class="a">
        <p>this is a</p>
    </div>   
    <div class="b">
        <p>this is b</p>
    </div>
    <div class="c">
        <p>this is c</p>
    </div>
    <div class="d">
        <p>this is d</p>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.parent  div').hide();

$('#nav a').click(function() {
    console.log($(this).index('a'));
    var $div = $('.parent > div').eq($(this).index('#nav a'));
    $div.show();
    $('.parent > div').not($div).hide();
});
</script>
</body>
</html>


例子
S.E.瑜伽




这是一个
这是b
这是c
这是d
$（'.parent div'）.hide（）；
$（'#导航a'）。单击（函数（）{
console.log（$（this.index（'a'））；
var$div=$（'.parent>div'）.eq（$（this）.index（'#nav a'））；
$div.show（）；
$（'.parent>div'）。而不是（$div.hide（）；
});

您没有包括。另外，您可能希望将jquery代码包装在

$（function（）{/*您的代码放在这里*/}）

以确保在呈现页面时运行。有可能当你调用

$（“#nav a”）。点击（…

那

#nav a

可能不在那里。

$（function（）{…}）

会在浏览器说已经完成渲染所有内容时运行你的代码。好吧，看看他的小提琴！他已经有了库设置！他所需要的就是Mushinoshin和我已经说过的`$（function（）{})“无法从JSFIDLE使JQuery工作？”这就是问题所在。在JSFIDLE中，你不会在头上放脚本标记，在JSFIDLE中，你不会在结尾的正文标记上放任何脚本！非常感谢！它现在可以工作了。我真的很感谢你的帮助！我还有一个问题。它似乎不适用于IE，我听说console.log是其中的一个问题。有什么方法可以让这个IE生效吗兼容？如果需要在旧版本的ie中使用，请在导入的脚本标记中将jQuery版本更改为1.11.3jquery@user5166162Thanks谢谢你的帮助！非常感谢！