jquery click событие туда и обратно - PullRequest
Новая
       47

jquery click событие туда и обратно

1 голос
/ 07 ноября 2019

Я работаю над своим портфолио с моими рабочими контактами и т. Д. В 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");
    });

});

1 Ответ

0 голосов
/ 07 ноября 2019

Я не знаю 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>
...