2016-03-22 13 views
0

In einer meiner MVC-Anwendung, in einer bestimmten Seite angeben, ich habe die folgenden RegisterkartenRegisterkarte Name in der URL

<div id="tabs" style="clear: both;"> 
         <ul> 
          <li><a href="#Tab1">tab1</a></li> 
          <li><a href="#Tab2">tab2</a></li> 
          <li><a href="#Tab3">tab3</a></li> 
          <li><a href="#Tab4">tab4</a></li> 
         </ul> 

</div 

Meine Frage ist, wenn ich die URL wie eingegeben darunter mir die spezifische Registerkarte umleiten sollte

https://someurl/#Tab4 ----> es sollte mich auf die Registerkarte 4 umleiten, aber stattdessen verweist es mich immer auf die Registerkarte1 standardmäßig.

Kann jemand bitte hier helfen?

+0

Reproduzieren des Problems durch eine Geige, scheint die URL hier in Ordnung. –

Antwort

0

Die Lösung, die Sie in Ihrer Frage haben Sie an die richtige URL senden, aber es gibt keinen Umgang mit der # TAB4 in Ihrem HTML ...

Normalerweise wird der Browser die Ansicht der Seite anpassen die zeigen, Element mit der ID 'tab4', aber wenn Sie ein normales Tab-System haben, wird Tab 4 standardmäßig ausgeblendet. Sie benötigen ein Jquery-Plugin oder schreiben Ihre eigene Jquery, die den aktuellen Tab-Inhalt ausblendet und den neuen Tab-Inhalt anzeigt.

Also dieses Problem zu beheben, müssen Sie

<li><a href="#Tab1" id="Tab1">tab1</a></li> 

diese Weise kann der Browser wissen, eine ID für jede Ihrer Registerkarten hinzufügen, wo es navigieren muss.

Dann müssen Sie auch einen Ereignis-Listener mit Jquery erstellen, damit Sie beim Klicken auf einen Tab-Link wissen, dass Sie von einem Tab zu einem anderen wechseln möchten.

Diese entlang der Linien wird:

$(document).ready(function() { 
     $('#tabs>ul>li>a').on('click', function() { 
      //hide all of the content from all of the tabs 
      $('.tab-content').hide(); 
      //show just the content from the child of the tab 
      //you may need to adjust the selector to point to the actual path to find the content for the tab. 
      $(this).children('.tab-content').show(); 
     }); 
}); 
Verwandte Themen