javascript - 如何有效地使用 JS 在按钮上显示文本

Question

当我单击一个按钮并隐藏其他按钮时，我想显示一个 div。

这是我的方法：

var enunt = document.querySelector(".enunt");
var rezolvare = document.querySelector(".rezolvare");
var explicatie = document.querySelector(".explicatie");
var complexitate = document.querySelector(".complexitate");
var executie = document.querySelector(".executie");

var enuntText = document.querySelector(".enunt-problema");
var rezolvareText = document.querySelector(".rezolvare-problema");
var explicatieText = document.querySelector(".explicare-problema");
var complexitateText = document.querySelector(".complexitate-problema");
var executieText = document.querySelector(".executie-problema");

enunt.addEventListener("click", function() {
    enuntText.style.display = "block";
    rezolvareText.style.display = "none";
    explicatieText.style.display = "none";
    complexitateText.style.display = "none";
    executieText.style.display = "none";
});

rezolvare.addEventListener("click", function() {
    enuntText.style.display = "none";
    rezolvareText.style.display = "block";
    explicatieText.style.display = "none";
    complexitateText.style.display = "none";
    executieText.style.display = "none";
});

explicatie.addEventListener("click", function() {
    enuntText.style.display = "none";
    rezolvareText.style.display = "none";
    explicatieText.style.display = "block";
    complexitateText.style.display = "none";
    executieText.style.display = "none";
});

complexitate.addEventListener("click", function() {
    enuntText.style.display = "none";
    rezolvareText.style.display = "none";
    explicatieText.style.display = "none";
    complexitateText.style.display = "block";
    executieText.style.display = "none";
});

executie.addEventListener("click", function() {
    enuntText.style.display = "none";
    rezolvareText.style.display = "none";
    explicatieText.style.display = "none";
    complexitateText.style.display = "none";
    executieText.style.display = "block";
});

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    font-family: 'Proxima Nova';
    font-weight: 200;
    font-size: 10px;
    max-height: 100%;
    background-color: #00000f;
}

body {
    width: 100%;
    color: #fff;
    text-rendering: optimizeLegibility;
    font-family: "Proxima Nova" !important;
    font-size: 10px;
    overflow-x: hidden;
    background-color: #00000f !important;
}

.navbar-custom {
    position: relative;
}

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bg-transparent {
    background-color: transparent !important;
}

.nav-color {
    color :#fff !important;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
}

.nav-color:hover {
    color: #77dff1 !important;
}

.nav-active {
    color: #77dff1 !important;
}

.display-custom {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 17.5rem !important;
    text-align: center;
}

.lead-custom {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7 !important;
}

/*Continut centru*/

#central {
    font-family: 'Proxima Nova', sans-serif;
    display: table;
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#intro-wrap {
    display: table-cell;
    vertical-align: middle;
    max-width: 710px;
    width: 100%;
}

#intro {
    text-transform: uppercase;
    color: #77dff1 !important;
    font-size: 17.5rem;
    text-align: center;
}

.intro {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7 !important;
}

#hr {
    position: absolute;
    top: 90%;
    width: 100%;
    margin: 0 auto;
}

hr {
    border-color: #77dff1 !important;
    max-width: 90%;
}


.button-wrap {
    postion: absolute;
    text-align: center;
    margin-top: 2.5rem;
}

.button-custom {
    font-family: 'Proxima Nova';
    font-weight: 600;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    border: 2px solid #77dff1;
    padding: 15px;
    margin: 0 auto;
}

.button-custom:hover {
    font-weight: 100;
    color: #00000f;
    background: #77dff1;
}

/* probleme DEI */

.list-item-custom {
    text-align: center;
    border: 1px solid #77dff1;
    color: #77dff1;
    padding: 2rem 4rem;
    margin-bottom: 0.7rem;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
}

.list-item-custom:hover {
    background-color: #77dff1;
    color: #fff;
}

.col-sm-6 {
    text-align: center;
    border: 1px solid #77dff1;
    color: #77dff1;
    padding: 2rem;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
}

.col-hover:hover {
    font-weight: 100;
    color: #fff;
    background: #77dff1;
}

.col-custom {
    color: #fff;
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
}

.pre-scrollable {
    max-height: 700px !important;
    border: 1px solid #77dff1;
}

.lista-pasi-executie {
    list-style: decimal;
}

.fontawesome-custom {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    color: #77dff1;
    font-size: 20rem;
}

.autor-color {
    color: #77dff1;
    font-weight: bold;
}

.explicatie-rezolvare {
    color: #77dff1;
    font-weight: bold;
}

.lista-observatii {
    list-style: disc;
}

.lista-pasi-executie > li {
    margin-left: 2rem;
}

.autor-problema-span {
    color: #77dff1;
    font-weight: bold;
}

.pre-custom {
    color: #fff;
    font-size: 1.5rem;
}

.fontawesome-custom {
    margin-top: 4rem;
}

.autor-problema {
    font-size: 4rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Divide et Impera</title>
    <link href="../css/normalize.css" rel="stylesheet" />
    <link href="../css/fonts.min.css" rel="stylesheet" />
    <link href="../css/main.css" rel="stylesheet" />
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6612084f00.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon" style="color: #fff !important"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-link nav-color" href="#">Home</a>
                <a class="nav-link nav-color" href="#">Introducere DEI</a>
                <a class="nav-link nav-color" href="#">DEI Iterativ</a>
                <a class="nav-link nav-color nav-active" href="#">Probleme DEI</a>
              </div>
            </div>
          </nav>
          <div style="position: absolute; top: 50%; left: 1%; transform:translateY(-50%);">
                <ul class="list-group">
                    <li class="list-group-flush list-item-custom enunt">Enunt</li>
                    <li class="list-group-flush list-item-custom rezolvare">Rezolvare + cod</li>
                    <li class="list-group-flush list-item-custom explicatie">Explicatie rezolvare</li>
                    <li class="list-group-flush list-item-custom complexitate">Complexitate</li>
                    <li class="list-group-flush list-item-custom executie">Executie</li>
                  </ul>
          </div>
              <div class="enunt-problema">
                <div class="row">
                  <div class="col-xs-12 col-custom">
                    <i class="fas fa-clipboard fontawesome-custom"></i>
                  </div>
                </div>
                  <div class="row d-flex justify-content-center align-items-center vh-100">
                    <div class="col-xs-12 col-custom">
                      <div class="autor-problema">Autor: <span class="autor-problema-span">Mihai Vasile</span></div>
                        Sa se demonstreze daca un arbore binar este de tipul BST (binary search tree)
                              <div class="observatie-BST">
                                <span style="font-weight: bold; color: #77dff1;">Observatie </span>- un BST are urmatoarele proprietati:
                              </div>
                              <ul class="lista-observatii">
                                <li>Orice subarbore din partea stanga al unui nod contine valori mai mici decat nodul “tata”&lt;/li>
                                <li>Orice subarbore din partea dreapta al unui nod contine valori mai mari decat nodul “tata”&lt;/li>
                                <li>Atat subarborele drept, cat si cel stang trebuie sa fie la randul lor BST</li>
                              </ul>   
                    </div>
                  </div>                 
              </div>
              <div class="rezolvare-problema" style="display: none;">
                <div class="row d-flex justify-content-center align-items-center vh-100">
                  <div class="col-xl-12">
                    <pre class="pre-scrollable pre-custom">
#include "iostream"

using namespace std;

//Un nod al unui arbore binar are drept componente id-ul sau,
//cat si pointeri catre "copilul" drept si cel stang.

class node
{
public:
    int data;
    node* left;
    node* right;

    // Allocam noului nod id-ul sau 
    //si initializam pointeri catre stanga si dreapta cu NULL
    node(int data)
    {
        this->data = data;
        this->left = NULL;
        this->right = NULL;
    }
};

int isBSTUtil(node* node, int min, int max);

/* Functia principala ce verifica daca arborele binar
este de tip BST sau nu, utilizand o functie secundara numita
isBSTUtil */
int isBST(node* node)
{
    return(isBSTUtil(node, INT_MIN, INT_MAX));
}
/* Intoarce adevarat daca arborele dat este de tip BST si
se respecta conditiile impuse in cerinta: 
id-ul sa fie >=min si <=max 
*/
int isBSTUtil(node* node, int min, int max)
{
    /* un nod NULL este de tip BST */
    if (node == NULL)
        return 1;

    /* fals daca id-ul nodului nu este cuprins intre min si max */
    if (node->data < min || node->data > max)
        return 0;

    /* Daca nodul curent respecta conditia BST, se verifica recursiv subarbori acestuia,
    modificand corespunzator min si max */
    return
        isBSTUtil(node->left, min, node->data - 1) && // Id-urile nu trebuie sa se repete  
        isBSTUtil(node->right, node->data + 1, max); // Id-urile nu trebuie sa se repete
}


int main()
{
    node* root = new node(4);
    root->left = new node(2);
    root->right = new node(5);
    root->left->left = new node(1);
    root->left->right = new node(3);

    if (isBST(root))
        cout << "Este BST";
    else
        cout << "Nu este BST";

    return 0;
}
                    </pre>
                      </pre>
                  </div>
                </div>                  
              </div>
              <div class="explicare-problema" style="display: none; color: #fff;">
                <div class="row">
                  <div class="col-xs-12 col-custom">
                    <i class="far fa-lightbulb fontawesome-custom"></i>
                  </div>
                </div>
                  <div class="row d-flex justify-content-center align-items-center vh-100">
                    <div class="col-xs-12 col-custom">
                      <div class="col-custom" style="text-align: left;">
                        <span class="explicatie-rezolvare">Explicatie rezolvare:</span>  
        Problema are la baza verificarea daca id-urile unice ale unor noduri dintr-un arbore respecta conditiile specifice unui arbore BST.
        Incepem prin a ne declara arborele, acesta fiind o clasa ce contine: id-ul, cat si pointeri catre „fii” (subarborii) sai: stang si drept.
        Se apeleaza functia ce verifica daca arborele este BST sau nu, aceasta efectuand urmatoarele operatii:
        <ol class="lista-pasi-executie">
          <li>Se seteaza initial limitele intre care trebuie sa se situeze nodurile min si max drept limitele tipului de data INT</li>
          <li>Verifica daca nodul dat este NULL, caz in care returnaza adevarat (un nod gol este de tip BST deoarece nu influenteaza min si max si nu are un id asociat)</li>
          <li>Se verifica daca id-ul nodului este cuprins in intervalul [min,max].</li>
          <li>In caz negativ, functia returneaza 0;</li>
          <li>In caz afirmativ, se apeleaza recursiv functia mai intai pe partea stanga a arborelui, dupa care pe partea dreapta, modificand min si max corespunzator directiei in care o luam</li>
        </ol>  
                        </div>
                    </div>
                  </div>                 
              </div>
              <div class="complexitate-problema" style="display: none; color: #fff;">
                <div class="row">
                  <div class="col-xs-12 col-custom">
                    <i class="fas fa-chart-line fontawesome-custom"></i>
                  </div>
                </div>
                  <div class="row d-flex justify-content-center align-items-center vh-100">
                    <div class="col-xs-12 col-custom">
                        <span style="color: #77dff1;">Complexitate:</span> O(n) <br>
                        <span style="color: #77dff1;">Demonstratie complexitate:</span><br>
                        Algoritmul prezentat mai sus verifica daca id-ul nodului curent se afla in intervalul [min,max]. In caz afirmativ, acesta se autoapeleaza si continua aceasta verificare a id-ului mai intai in subarborii stangi, dupa care cei drepti.
                        Astfel, pentru un arbore de marime n, sunt parcurse in mod recursiv toate cele n noduri, ceea ce da programului o complexitate medie de O(n).
                    </div>
                  </div>                 
              </div>
            <div class="executie-problema" style="display: none;">
              <div class="row">
                <div class="col-xs-12 col-custom">
                  <i class="fas fa-cogs fontawesome-custom"></i>
                </div>
              </div>
          </div>
          </div>
      </div>
    </div>
</body>
</html>

我不太喜欢它，因为它不是很直观。用户每次点击一个按钮，都要进行 5 次操作。

我很确定对此有更好的方法，但我不知道该怎么做。

任何人都可以帮助我简化我的 JS 代码并使其更有效吗？

标签： javascripthtmlcss

Answer 1

我看到您正在使用引导程序，因此您可以轻松使用tabs它会给您与您尝试做的相同的行为。检查以下链接：https ://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior