JavaScript implementiert die Klick-Umschaltfunktion

<Text>
<h2>Multi-Tab-Klickschalter</h2>
<ul id="Registerkarte">
 <li id="tab1" value="1">10 Yuan Menü</li>
 <li id="tab2" value="2">30 Yuan Menü</li>
 <li id="tab3" value="3">50 Yuan pro Monat</li>
</ul>
<div id="Behälter">
 <div id="Inhalt1">
 Details zum 10-Yuan-Paket: <br/>&nbsp;100 Minuten Anrufe im Rahmen des Monatspakets, 0,2 Yuan/Minute für den darüber hinausgehenden Betrag</div>
 <div id="Inhalt2" style="Anzeige: keine">
 Details zum 30-Yuan-Paket: <br/>&nbsp; 300 Gesprächsminuten im Monatspaket, 1,5 Yuan/Minute für den darüber hinausgehenden Betrag</div>
 <div id="Inhalt3" style="Anzeige: keine">
 Details zum 50-Yuan-Monatspaket: <br/>&nbsp;Unbegrenzte Anrufe pro Monat</div>
</div>
</body>

<Stil>
 * {
  Rand: 0;
  Polsterung: 0;
 }
 #tab li {
  schweben: links;
  Listenstil: keiner;
  Breite: 80px;
  Höhe: 40px;
  Zeilenhöhe: 40px;
  Cursor: Zeiger;
  Textausrichtung: zentriert;
 }
 #Behälter {
  Position: relativ;
 }
 #Inhalt1, #Inhalt2, #Inhalt3 {
  Breite: 300px;
  Höhe: 100px;
  Polsterung: 30px;
  Position: absolut;
  oben: 40px;
  links: 0;
 }
 #tab1, #content1 {
  Hintergrundfarbe: #ffcc00;
 }
 #tab2, #content2 {
  Hintergrundfarbe: #ff00cc;
 }
 #tab3, #content3 {
  Hintergrundfarbe: #00ccff;
 }
</Stil>

//Natives js
 var Container = Dokument.QuerySelectorAll('#Container>div')
 var event_li = document.querySelectorAll('#tab>li')
 var aktueller Index = 0
 für(var i=0;i<event_li.length;i++){
 event_li[i].num=i
 event_li[i].onclick=Funktion(){
  Container[aktuellerIndex].style.display='keine'
  var index_other = diese.num
  Container[index_anderes].style.display='Block'
  aktuellerIndex=andererIndex
 }}

// jQuery-Implementierung: Klicken Sie auf das übergeordnete Element, alle untergeordneten Elemente sind display_none, und setzen Sie dann die untergeordneten Elemente des Elements mit dem Klickereignis auf display_block
var $container = $('#container>div')
$('#tab>li').klick(function(){
 $container.css('Anzeige', 'keine')
 var index = $(dieser).index()
 var index_other = $(diese).val()-1
 $container[index_other].style.display = "Block"
})

// jQuery-Implementierung: Klicken Sie auf das übergeordnete Element. Das untergeordnete Element des ersten Elements ist display_none. Anschließend wird das untergeordnete Element des Elements mit dem Klickereignis auf display_block gesetzt.
aktueller Index = 0
$('#tab>li').klick(function(){
 $($container[currentindex]).css('Anzeige', 'keine')
 var index = $(dieser).index()
 $container[index].style.display = "Block"
 aktuellerIndex=Index
})