Question

试图了解Javascript和HTML5的工作原理。我有一个导航，当你按下第一部分时，我正在尝试显示内容1，当你按下第二部分......等等。我已经尝试了几件事，我显然不能正确理解.next，但我只能让它显示第一个元素，但是当我按下第二部分时，内容二没有显示。我想我的形象是错误的，而不是.first（），。next对我有意义，因为我觉得这样才能获得下一个元素。无论如何，这里有一些代码，提前谢谢。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Assignment 6 | jQuery Usability </title>

    <link rel="stylesheet" href="stylesheet.css">


<!-- This matches the CSS width to the device width, and prevents forced overview without disabling zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

<!-- Helpful for older Blackberries -->
    <meta name="HandheldFriendly" content="True">
<!-- Helpful for older IE mobile -->
    <meta name="MobileOptimized" content="320">
<!-- Apple iOS-specific --> 
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">


<!-- enforce CSS3 media queries in IE 8 and older -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Note: this won't work when testing locally; you'll need to upload your files to a server to test it in IE -->


<!-- HTML5shiv, for IE 6, 7 and 8 -->
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->


<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
$(document).ready(function() {

    $('ul').hide();

    $('a.btnDown').click(function() {

        $('nav>ul').fadeIn(200);

    }); //closes a.btnDown

    $('a.contentDown').click(function() {
        $('body>aside>ul').first().fadeIn(200);

    }); //closes contentDown





}); //closes .ready()
</script>

</head>

<body>

<nav>
    <h1><a class="btnDown" href="#"> Main Menu </a></h1>
        <ul>
            <li><a class="contentDown" href="#"> Part One </a></li>

            <li><a class="contentDown" href="#"> Part Two </a></li>

            <li><a class="contentDown" href="#"> Part Three </a></li>

            <li><a class="contentDown" href="#"> Student Notes 1 </a></li>

            <li><a class="contentDown" href="#"> Student Notes 2 </a></li>

            <li><a class="contentDown" href="#"> Student Notes 3</a></li>

        </ul>

</nav>

<aside>

                <ul>
                    <li> Content 1 </li>
                </ul>

                <ul>
                    <li> Content 2 </li>
                </ul>

                <ul>
                    <li> Content 3 </li>
                </ul>

                <ul>
                    <li> Content 4 </li>
                </ul>

                <ul>
                    <li> Content 5 </li>
                </ul>


                <ul>
                    <li> Content 6 </li>
                </ul>
</aside>

<figure>

<!-- PUT TV IMAGE HERE -->
</figure>




</body>
</html>

Answer 1

使用给定的标记，最简单的解决方案是使用元素的索引，如下所示

$(document).ready(function () {

    $('ul').hide();

    $('a.btnDown').click(function () {
        $('nav>ul').fadeIn(200);
        return false;
    }); //closes a.btnDown

    //all the content elements
    var $suls = $('body>aside>ul');
    var $as = $('a.contentDown').click(function () {
        //hide visible content item
        $suls.filter(':visible').hide();
        //display the content item in the same position as the clicked contentDown
        $suls.eq($as.index(this)).fadeIn(200);
    }); //closes contentDown
}); //closes .ready()

演示：Fiddle

Answer 2

您可以使用：

$('ul').hide();
$('a.btnDown').click(function () {
    $('nav>ul').fadeIn(200);
}); 
$('a.contentDown').click(function () {
    var idx = $(this).index('.contentDown');
    $('body>aside>ul:eq(' + idx + ')').fadeIn(200).siblings('ul').hide();
});

<强> Fiddle Demo

调用ul中的下一个元素的函数

2 个答案: