Question

我有这个相当简单的HTML

<html>
    <head>
        <title>My HTML5 App</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="stylesheet" href="css/ionicons.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/CustomStyling.css">

        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/content-controller.js"></script>
    </head>
    <body>
        <div class="body-header">
            <ul class="nav nav-pills nav-justified">
                <li role="presentation" class="active" id="homeBtn">
                    <a href="#"><b>Home </b><i class="ionicons ion-ios-home"
                                               style="
                                               font-size: 22px;
                                               vertical-align: middle;"></i>
                    </a>                    
                </li>
                <li role="presentation" id="feriefribookingBtn">
                    <a href="#"><b>Ferie Fri Booking </b><i class="glyphicon glyphicon-plane"
                                               style="
                                               font-size: 20px;
                                               vertical-align: middle;"></i>
                    </a>
                </li>
                <li role="presentation" id="pinfinityBtn">
                    <a href="#"><b>P - </b><i class="ionicons ion-ios-infinite" 
                                      style="
                                      font-size: 22px; 
                                      vertical-align: middle;"></i>
                    </a>
                </li>
                <li role="presentation" id="manpowerBtn">
                    <a href="#"><b>Manpower </b><i class="ionicons ion-ios-people"
                                               style="
                                               font-size: 24px;
                                               vertical-align: middle;"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="body-content"></div>
        <div class="body-footer"></div>
    </body>
</html>

当我按下其中一个导航栏按钮时，我需要这样做，它会使当前内容slideUp()和我希望用slideDown()替换它的新内容。但我在jQuery上相当新，并不完全确定如何实现这一目标。

我收到了以下JavaScript：

$(document).ready(function () {
    $('#homeBtn').click(function(e) {
        if(e !== this) {
            $('.body-content').contents().slideUp('fast', function() {
                var newbody = '<div class="jumbotro" style="text-align: center;"><h1>Home</h1></div>';
                $('.body-content').html(newbody).slideDown('fast');
            });
        }
    });

    $('#feriefribookingBtn').click(function(e) {
        if(e !== this) {
            $('.body-content').contents().slideUp('fast', function() {
                var newbody = '<div class="jumbotro" style="text-align: center;"><h1>Ferie Fri Booking</h1></div>';
                $('.body-content').html(newbody).slideDown('fast');
            });
        }
    });

    $('#pinfinityBtn').click(function(e) {
        if(e !== this) {
            $('.body-content').contents().slideUp('fast', function() {
                var newbody = '<div class="jumbotro" style="text-align: center;"><h1>P-Infinity</h1></div>';
                $('.body-content').html(newbody).slideDown('fast');
            });
        }
    });

    $('#manpowerBtn').click(function(e) {
        if(e !== this) {
            $('.body-content').contents().slideUp('fast', function() {
                var newbody = '<div class="jumbotro" style="text-align: center;"><h1>Manpower</h1></div>';
                $('.body-content').html(newbody).slideDown('fast');
            });
        }
    });
});

但它对页面本身没有任何作用，并且控制台中没有显示任何错误（使用Google Chrome和Netbeans）。所以我在这里有点不知所措。任何帮助将不胜感激！

Answer 1

我刚删除了.contents（），它对我有用。

$('#homeBtn a').click(function(e) {
        if(e !== this) {
            $('.body-content').slideUp('fast', function() {
                var newbody = '<div class="jumbotro" style="text-align: center;"><h1>Home</h1></div>';
                $('.body-content').html(newbody).slideDown('fast');
            });
        }
    });

查看此fiddle

我需要在单页网站上提供一些指导

1 个答案: