i'm working on my portfolio with my work contacts etc in jquery. i have class hidden which displays none and i can click on a button and the other things hides, but i can't go back and forth between the pages. how can i do like so? need help
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");
});
});
I don't know the html code, but you can hide all container siblings. This is an Example. Hope it helps
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.