基本上我希望首先显示一个部分作为主页。当我点击一个链接时,我希望显示该部分,但隐藏其他所有部分,依此类推。每次点击链接时,我只希望显示点击链接的部分。
我很接近,但卡住了。这是我的HTML:
<a href="#about" id="about" class="text-center" title="">About Me</a>
<a href="#contact" id="contact" class="text-center" title="">Contact</a>
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about showing">
<h2>Contact</h2>
</div>
</div>
这是我的剧本:
$(document).ready(function() {
$('.about').hide();
$('.contact').hide();
$('.showing').show();
$('#contact').on('click', function(e) {
e.preventDefault();
$('div').removeClass('showing');
$('.contact').addClass('showing');
if ($('div').hasClass('showing')) {
$('div').show();
} else {
$('div').hide();
}
});
});
所以它显示了关于我&#39;部分立即,其他一切都隐藏。当我点击“联系人”时链接它删除&#39;显示&#39;来自我所有人的课程,并添加&#39;显示&#39;我的联系部分。然后我检查一下&#39; div&#39; div有&#39;显示&#39;课程,如果是的话我会让它显示&#39; div&#39;否则我希望它隐藏它。
但是,当我点击“联系”链接时,它会显示“联系”部分,但不会隐藏“关于我”部分。我知道这是一个很长的帖子,我只是想确保我正确地解释一切。非常感谢任何帮助!
答案 0 :(得分:0)
我强烈建议您使用数据字段和通用类来使其通用。
var $pages = $('.container');
$('.menu').on('click', function(e){
//remove showing from all containers
$pages.removeClass('showing');
//put it on the container with the matching class of the data target
$pages.filter('.'+ $(e.target).data('target')).addClass('showing');
});
&#13;
.container {
display: none;
}
.container.showing {
display: unset;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#about" class="menu text-center" data-target="about" title="">About Me</a>
<a href="#contact" class="menu text-center" data-target="contact" title="">Contact</a>
<a href="#other" class="menu text-center" data-target="other" title="">Other</a>
<div class="container-fluid">
<div class="container home showing">
<h2>Home</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact">
<h2>Contact</h2>
</div>
</div>
<div class="container-fluid">
<div class="container other">
<h2>Other</h2>
</div>
</div>
&#13;
答案 1 :(得分:0)
以下是您可以优化的一些内容:
$(document).ready(function() {
$('.about, .contact').hide(); //put both of them in single selector
$('.showing').show(); //this shows the only element that has "showing
$('#contact, #about').on('click', function(e) {
e.preventDefault();
var self = $(this); //reference to the object being clicked
var target = $("." + self.attr('id'));
//removes "showing" class from all others and hides them
$(".container").not(target).removeClass("showing").hide();
//adds "showing" class to the new current item
target.addClass("showing").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#about" id="about" class="text-center" title="">About Me</a>
<a href="#contact" id="contact" class="text-center" title="">Contact</a>
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact"> <!--you don't want that "showing" class here!-->
<h2>Contact</h2>
</div>
</div>