JQuery UI選項卡 - 始終呈現第一格div中的html

Question

我在我的asp.net MVC（RAZOR）應用程序中使用jQuery UI選項卡。我發現的問題是，每個選項卡單擊呈現第一個div中的HTML，即在這裏與ID「標籤-1」的div。

jQuery代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script> 


<script type="text/javascript"> 
    $(function ($) { 
     $('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
     $("#example li").removeClass("ui-corner-top").addClass("ui-corner-left"); 
    }); 
</script> 

HTML：

<div id="example" class="tabs" style="width: 698px;"> 
       <ul style="list-style: none;"> 
        <li><a href="/Details/Overview">Overview</a></li> 
        <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=5" >Specifications</a></li> 
        <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=1" >Exterior</a></li> 
        <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=2" >Interior</a></li> 
        <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=3" >Dimensions</a></li> 
        <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=4" >Feature</a></li> 
        <li><a href="/Version/Details?versionID=@ViewBag.versionId&grpId=6" >Instrument Panel</a></li> 
        <li><a href="#tabs-8">Color</a></li> 
       </ul> 
       <div id="tabs-1" style="width: 698px;"> 
        This is Tab one 
       </div> 
       <div id="tabs-2"> 
       </div> 
       <div id="tabs-3"> 
       </div> 
       <div id="tabs-4"> 
       </div> 
       <div id="tabs-5"> 
       </div> 
       <div id="tabs-6"> 
       </div> 
       <div id="tabs-7"> 
       </div> 
       <div id="tabs-8"> 
       </div> 
      </div> 

請指引我。

感謝，

@保羅

Answer 1

最後我通過匹配像波紋管

title屬性和容器的id得到了解決個

<li><a href="/Details/Overview" title="tabs-1">OverView</a></li> 
<li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=5" title="tabs-2">Specifications</a></li> 


<div id="tabs-1" style="width: 698px;">This is Tab one</div> 
<div id="tabs-2"> </div> 

感謝，

@保羅

Answer 2

我認爲ID = 「榜樣」 應該打倒類= 「標籤」 的div一個級別。

 <div id="example" class="tabs" style="width: 698px;"> 
      <ul style="list-style: none;"> 
       <li><a href="/Details/Overview">This is Tab one</a></li> 
       <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=5" >Specifications</a></li> 
       <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=1" >Exterior</a></li> 
       <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=2" >Interior</a></li> 
       <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=3" >Dimensions</a></li> 
       <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=4" >Feature</a></li> 
       <li><a href="/Version/Details?versionID=@ViewBag.versionId&grpId=6" >Instrument Panel</a></li> 
       <li><a href="#tabs-8">Color</a></li> 
      </ul> 
      <div id="tabs-1" style="width: 698px;"> 
       Overview 
      </div> 
      <div id="tabs-2"> 
      </div> 
      <div id="tabs-3"> 
      </div> 
      <div id="tabs-4"> 
      </div> 
      <div id="tabs-5"> 
      </div> 
      <div id="tabs-6"> 
      </div> 
      <div id="tabs-7"> 
      </div> 
      <div id="tabs-8"> 
      </div> 
     </div> 
    </div> 

編輯：

$('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
$("#example li").removeClass("ui-corner-top").addClass("ui-corner-left"); 
$('#example') 

什麼是你的jQuery第三行應該做的事情？它是否生成一個JavaScript錯誤，阻止標籤正常工作？

Answer 3

你的問題是你的錨定標籤中的hrefs。您必須將它們格式化爲「＃tabs-number」。

下面是一個的jsfiddle您展示它的工作（完全沒有，因爲這是不是在你的示例中提供或者任何CSS樣式，但被點擊每個標籤帶你到不同的選項卡的內容。

http://jsfiddle.net/UBxPJ/

但基本上，變化是：

  <li><a href="#tabs-1">Overview</a></li> 
      <li><a href="#tabs-2" >Specifications</a></li> 
      <li><a href="#tabs-3" >Exterior</a></li> 
      <li><a href="#tabs-4" >Interior</a></li> 
      <li><a href="#tabs-5" >Dimensions</a></li> 
      <li><a href="#tabs-6" >Feature</a></li> 
      <li><a href="#tabs-7" >Instrument Panel</a></li> 
      <li><a href="#tabs-8">Color</a></li>