JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste

In diesem Artikel wird der spezifische JavaScript-Code zur einfachen Tab-Leiste zum Wechseln der Inhaltsleiste zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

HTML+CSS-Teil

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        /* CSS initialisieren, da es einen Standardrand gibt*{ margin:0; padding:0;}

h1,h2,h3,h4,h5,h6{Schriftgröße:100%; Schriftstärke:normal;}

ol,ul{ Listenstil: keine;}

img,Feldsatz{ Rahmen:0 keine; Anzeige:Block;} */
        div,ul,li{
            Box-Größe: Rahmenbox;
            Rand: 0;
            Polsterung: 0;
        }
        ul{
            Listenstiltyp: keiner;
        }
        A{
            Textdekoration: keine;
        }
        #nav{
            Breite: 450px;
            Höhe: 400px;
            Rand: 100px auto;/*links und rechts zentriert*/
            Hintergrundfarbe: rosa;
            Polsterung: 0;
            Schriftgröße: 14px;
        }
        
        li{
            schweben: links;
            Breite: 150px;
            Höhe: 30px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 0,6rem;
            Rand: 0,02rem durchgezogen #ccc;
        }
        .Inhalt{
            klar: beides;
            Position: relativ;
        }
        .inhalt div{
            Breite: 450px;
            Höhe: 370px;
            Position: absolut;
            Anzeige: keine;
        }
        .tab .wählen{
            Hintergrundfarbe: himmelblau;
        }
        .Inhalt .aktuell{
            Anzeige: Block;
        }
    </Stil>
    <script src="jQuery.mini.js"></script>
   
</Kopf>
<Text>
    <div id="nav">
        <div Klasse="Tabulator">
            <ul>
                <li class="wählen" ><a href="#" > 1</a></li>
                <li><a href="#" >2</a></li>
                <li><a href="#" >3</a></li>
            </ul>
        </div>
        <div Klasse="Inhalt">
            <div Klasse="aktuell">1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
    </body>
</html>

Nativer JS-Code

var lis = document.querySelectorAll('li');
var divs = document.querySelector('.content').querySelectorAll('div');
  für(var i=0 ; i<lis.length ; i++){
            lis[i].setAttribute('dateIndex',i);//Setze den Index jedes li, um das spätere Sperren der Inhaltsleiste zu erleichtern lis[i].addEventListener('click',function(){
                für(var j=0 ; j<lis.length ; j++){
                    lis[j].className = ''; //Setze den Stil aller li auf leer}
                this.className = 'choose'; //Stil des aktuell angeklickten li festlegen (exklusiv)
                var index = this.getAttribute('dateIndex'); //Index der aktuellen Zeile abrufen
                // konsole.log(index);
                für(var j=0 ; j<lis.length ; j++){
                   divs[j].className = '';//Exklusiv// lis[i].className = 'wählen';
                }
                divs[index].className = "aktuell";
          })
        }

## jQuery-Methoden ```javascript
// jQuery-Methode $(function(){
            $("li").klick(function(){
                $(this).addClass("choose"); //Stile zum aktuell angeklickten li hinzufügen $(this).siblings("li").removeClass("choose"); //Stile von seinen Geschwisterelementen entfernen (exklusiv)
                var index = $(this).index(); //Index des aktuell angeklickten Elements abrufen
                $(".content div").eq(index).zeigen().siblings("div").hide();
                // Holen Sie sich das entsprechende Inhaltsfeld über den Index, zeigen Sie es über show () an und verbergen Sie es dann, indem Sie das zugehörige Bruderelement auswählen und zerlegen ======》
                //$(".content div").eq(index).show();
                // $(".content div").eq(index).siblings("div").hide()
            })
        })

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: