Можно ли использовать jquery ui tabs без тегов ul li

Question

Я хочу использовать вкладки jquery ui без тегов ul li.

Мой HTML-код будет, как показано ниже структуры:

<div id="tabs"> 
    <div id="tabs"> 
    <a href="#tab1">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    <a href="#">Link 4</a> 
    </div> 
    <div class="tabsContent"> 
    <div id="tab1"> 
    </div> 
    <div id="tab2"> 
    </div> 
    <div id="tab3"> 
    </div> 
    <div id="tab4"> 
    </div> 
</div> 

Как я могу сделать его работу, как это?

Thanks

Answer 1

Ниже приведен пример того, как вы можете его достичь. Объяснение в комментариях

$(document).ready(function(){ 
 
    $('.tabBody.active').show(); //initially show the `tabBody` which has active class 
 
}) 
 

 
//click event to each `tabs` element 
 
$('.tabs').on('click',function(e){ 
 
    e.preventDefault(); 
 
    $('.tabs').removeClass('active'); //remove active class from all the tabs 
 
    $(this).addClass('active'); //add active to current clicked element 
 
    var target=$(this).attr('href'); //get its href attrbute 
 
    $('.tabBody').hide('fast').removeClass('active'); //remove active from tabBody and hide all of them 
 
    $(target).show('slow').addClass('active'); //show target tab and add active class to it 
 
})

.tabBody{ 
 
    display:none; /*hide all tabBody, we are showing first one using jquery*/ 
 
    margin-top:30px; 
 
} 
 
.tabs.active{ 
 
    background:red; /*just to make sure tabs which is been active at present*/ 
 
    border-bottom:transparent !important; 
 
    zoom:1.4; 
 
} 
 

 
a.tabs{ 
 
    text-decoration: none; 
 
    border:black 2px solid; 
 
    margin-left: -5px; 
 
    padding:7px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tabsParent"> <!--ids should not be duplicate so changed this to tabsParent--> 
 
    <div id="tabs"> 
 
    <!--add tabs class to each anchor tag and active class to first one--> 
 
    <a class="tabs active" href="#tab1">Link 1</a> 
 
    <a class="tabs" href="#tab2">Link 2</a> 
 
    <a class="tabs" href="#tab3">Link 3</a> 
 
    <a class="tabs" href="#tab4">Link 4</a> 
 
    </div> 
 
    <div class="tabsContent"> 
 
    <!--add tabBody class to each body to be displayed and active to first one by default.--> 
 
    <div class="tabBody active" id="tab1"> 
 
     Tab 1 content 
 
    </div> 
 
    <div class="tabBody" id="tab2"> 
 
     Tab 2 content 
 
    </div> 
 
    <div class="tabBody" id="tab3"> 
 
     Tab 3 content 
 
    </div> 
 
    <div class="tabBody" id="tab4"> 
 
     Tab 4 content 
 
    </div> 
 
</div>