是否有可能使用沒有ul標籤的jquery ui標籤

Question

我想使用沒有ul標籤的jquery ui標籤。

我的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> 

我怎樣才能使像這項工作？

謝謝

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>