js realisiert die Funktion zum Klicken zum Wechseln der Karte

<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
})