我正在与jquery中的工作联系人等一起处理我的投资组合。我隐藏了不显示任何内容的类,可以单击一个按钮,其他内容也隐藏了,但是我无法在页面之间来回移动。我该怎么办呢?需要帮助
let startPage = $(".container-startPage");
let about = $(".container-aboutPage");
let portfolio = $(".container-portfolioPage");
let contact = $(".container-contactPage");
$(document).ready(function() {
$("#about-btn").click(function() {
about.removeClass("hidden");
startPage.attr("style", "display:none");
contact.attr("style", "display:none");
portfolio.attr("style", "display:none");
});
$("#portfolio-btn").click(function() {
portfolio.removeClass("hidden");
startPage.attr("style", "display:none");
about.attr("style", "display:none");
contact.attr("style", "display:none");
});
$("#contact-btn").click(function() {
contact.removeClass("hidden");
startPage.attr("style", "display:none");
about.attr("style", "display:none");
portfolio.attr("style", "display:none");
});
});
我不知道html代码,但是您可以隐藏所有容器同级。这是一个例子。希望对您有所帮助
let startPage = $(".container-startPage");
let about = $(".container-aboutPage");
let portfolio = $(".container-portfolioPage");
let contact = $(".container-contactPage");
$(document).ready(function() {
$("#about-btn").click(function() {
about.removeClass("hidden");
about.siblings().addClass('hidden')
});
$("#portfolio-btn").click(function() {
portfolio.removeClass("hidden");
portfolio.siblings().addClass('hidden')
});
$("#contact-btn").click(function() {
contact.removeClass("hidden");
contact.siblings().addClass('hidden')
});
});
.hidden {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="about-btn">About</button>
<button id="portfolio-btn">Portfolio</button>
<button id="contact-btn">Contact</button>
<div>
<div class="container-aboutPage ">About Page</div>
<div class="container-portfolioPage hidden">Portfolio Page</div>
<div class="container-contactPage hidden">Contact Page</div>
</div>