jquery - 是否可以使用没有 ul li 标签的 jquery ui 标签

Question

我想使用不带 ul li 标签的 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>