我有这个相当简单的 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)。所以我在这里有点不知所措。任何帮助将不胜感激!
最佳答案
我刚刚删除了 .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
关于javascript - 我需要一些有关单页网站的指导，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33692596/