Maison  >  Questions et réponses  >  le corps du texte

Changez la classe du bouton déroulant après avoir cliqué sur l'élément déroulant et rechargez la page

<p>J'essaie de changer la classe d'un élément de bouton déroulant après que l'utilisateur a cliqué sur un élément dans le menu déroulant et rechargé la page. </p> <p>Le code suivant est valide lorsque la page est actualisée. </p> <pre class="brush:php;toolbar:false;">$(".dropdown-content").on("click", function() { $('.dropbtn').toggleClass('active'); });</pré> <p>Existe-t-il des options de stockage local que je peux utiliser ? Je viens de l'apprendre. </p> <p>J'utilise actuellement le code suivant pour appeler le texte qui apparaît dans le bouton déroulant : </p> <pre class="brush:php;toolbar:false;">$(".dropbtn").text( localStorage.getItem("sélectionné") ? localStorage.getItem("sélectionné") : "Liens utiles" ); $(".dropbtn").on("clic", function () { $(".dropdown-content").toggleClass("open"); }); $(".dropdown-content a").on("clic", function () { $(".dropbtn").text($(this).text()); localStorage.setItem("selected", $(this).text()); $(".dropdown-content").removeClass("open"); });</pré> <p>Un grand merci à @RedApple pour son aide. Cela fonctionne bien - je me demande simplement si la classe .dropbtn pourrait être définie comme active de la même manière lorsque l'on clique sur l'élément a .dropdown-content. </p> <p> J'ai essayé ceci, mais je pense que je ne l'utilise pas correctement car .dropbtn ne conserve pas la classe active lors de l'actualisation de la page : </p> <pre class="brush:php;toolbar:false;">$(".dropdown-content").on("click", function() { localStorage.setItem("active", $('.dropbtn').toggleClass('active')); $('.dropbtn').toggleClass('active'); });</pré> <p><br /></p>
P粉877719694P粉877719694404 Il y a quelques jours486

répondre à tous(1)je répondrai

  • P粉063039990

    P粉0630399902023-08-18 13:17:57

    Je pense que cela devrait fonctionner...

    let isBtnClicked = localStorage.getItem("isBtnClicked")
    ? localStorage.getItem("isBtnClicked")
    : false;
    $(".dropbtn").addClass(
    isBtnClicked
    ? "hovered" // 在这里填入您点击按钮的类名
    : ""
    );
    $(".dropbtn").text(
    localStorage.getItem("selected")
    ? localStorage.getItem("selected")
    : "Helpful Links"
    );
    $(".dropbtn").on("click", function () {
    $(".dropdown-content").toggleClass("open");
    isBtnClicked = !isBtnClicked;
    localStorage.setItem("isBtnClicked", isBtnClicked);
    });
    $(".dropdown-content a").on("click", function () {
    $(".dropbtn").text($(this).text());
    localStorage.setItem("selected", $(this).text());
    $(".dropdown-content").removeClass("open");
    });

    répondre
    0
  • Annulerrépondre