Question

我在fiddle找到了我需要的答案但是，当我把它放在一个文档中时，我无法让它工作。我从来没有使用过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>

Answer 1

问题1：你不包括jQuery

问题2：您必须在结束</body>标记之前将脚本放在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>

无法从JSFiddle中使用JQuery吗？

1 个答案: