Warum funktionieren meine Jump-Links in meiner jQuery-Tab-Implementierung nicht?

So erstellen Sie einfache Tabs mit jQuery: Fehlerbehebung bei Jump-Link-Problemen

Das dargestellte Problem bezieht sich auf eine jQuery-Implementierung, bei der Jump-Links nicht funktionieren wie in einem bestimmten CMS erwartet. Um dieses Problem anzugehen, untersuchen wir eine alternative Lösung, die die Funktionalität in Gegenwart von JS aufrechterhält.

Überarbeiteter Code:

Der aktualisierte jQuery-Code lautet wie folgt:

$('#tabs li a').click(function(){
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'+ t + 'C').fadeIn('slow');
 }
});

Geändertes Markup:

Das HTML-Markup wurde ebenfalls überarbeitet:

<ul id="tabs">

      <li><a id="tab1">test1</a></li>
      <li><a id="tab2">test2</a></li>
      <li><a id="tab3">test3</a></li>
      <li><a id="tab4">test4</a></li>

</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

Lösung:

Dieser überarbeitete Code beseitigt das Problem mit Sprunglinks, indem eine andere Methode zur Behandlung des Klickereignisses verwendet wird. Das ID-Attribut des Ankers () wird verwendet, um das Zielinhalts-Div zu bestimmen (identifiziert durch das ID-Attribut, das mit C endet). Dadurch können die gewünschten Inhalte sowohl mit als auch ohne aktiviertem JS nahtlos angezeigt werden.

Das obige ist der detaillierte Inhalt vonWarum funktionieren meine Jump-Links in meiner jQuery-Tab-Implementierung nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!