Переключение между двумя вкладками/таблицами с отображением div

Question

Я хочу переключиться между двумя вкладками (списками) на странице aspx.

Есть две вкладки с тегом div, которые начинаются со стиля = "display: block;" и style = "display: none;" соответственно.

Я хочу переключиться между ними, когда пользователь нажимает на вкладку. Вот мой код.

<ul class="something" role="tablist"> 
    <li tabindex="0" class="random1" role="tab" aria-selected="true" aria-controls="application-tabs-1" aria-labelledby="ui-id-1"><a tabindex="-1" class="ui-tabs-anchor" id="ui-id-1" role="presentation" href="#application-tabs-1">Hello</a></li> 
    <li tabindex="-1" class="random2" role="tab" aria-selected="false" aria-controls="application-tabs-2" aria-labelledby="ui-id-2"><a tabindex="-1" class="ui-tabs-anchor" id="ui-id-2" role="presentation" href="#application-tabs-2">World</a></li> 
</ul> 

<div class="something-else1" id="application-tabs-1" role="tabpanel" aria-expanded="true" aria-hidden="false" aria-labelledby="ui-id-1" style="display: block;"> 
    <table class="applications"> 
     <thead> 
      <tr> 
       <th>Java</th><th>C</th> 
      </tr> 
     </thead> 
    </table> 
</div> 


<div class="something-else2" id="application-tabs-2" role="tabpanel" aria-expanded="false" aria-hidden="true" aria-labelledby="ui-id-2" style="display: none;"> 
    <table class="applications"> 
     <thead> 
      <tr> 
       <th>English</th><th>French</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</div> 

Я понимаю, что нужно создать JQuery для переключения между таблицами с помощью идентификаторов, и я пробовал разные варианты, но ни один из них не работал.

Option1

<script> 
    $("#application-tabs-2").show(); 
    $("#application-tabs-2").hide(); 
</script> 

Вариант 2

<script> 
    $("#application-tabs-2").css("display", "block"); 
    $("#application-tabs-2").css("display", "none"); 
</script> 

Вариант 3

<script> 
    $(document).ready(function displayChange(){ 
    $("application-tabs-1").toggle(); 
    $("application-tabs-2").toggle(); 
    }); 
</script> 

Как я могу это исправить?

Answer 1

Вам нужно будет вызвать функцию после нажатия на вкладку. В функции поиска HREF этой вкладки, чтобы отобразить ее и скрыть все остальные братья и сестры (уведомление я исключил свой ул с классом «что-то»):

$(".ui-tabs-anchor").click(function(event) { 
    $("div#"+this.getAttribute('href')).show(); 
    $("div#"+this.getAttribute('href')).siblings().not('.something').hide(); 
});