>

내 코드는 다음과 같습니다 :

<div id="tablesTabs">
        <ul>
            <li><a id="changed" href="#changedTable"><% "Changed" %></a></li>
            <li><a id="unchanged" href="#changedTable"><% "Unchanged"%></a></li>
        </ul>
    </div>
<div id="tablesDiv">
        <div id="changedTable" style="width:100%; height:430px;"></div>
    </div>

그리고 자바 스크립트에서 :

$(function () {
        $("#tablesTabs").tabs({
            cache: true
        }).scrollabletab();
        loadTables();
    });
if ($('#tablesTabs').tabs("option", "selected") == 0) {
    //fill table with data
}
if ($('#tablesTabs').tabs("option", "selected") == 1) {
    //fill table with other data
}

첫 번째 탭은 괜찮아 보입니다. 격자는 괜찮습니다. 그러나 두 번째 탭을 클릭하면 Uncaught jQuery UI Tabs : Mismatching fragment identifier 오류가 발생합니다. 문제는 무엇이고 어떻게 해결합니까?

  • 답변 # 1

    먼저 문제가 두 탭이 href 속성에 동일한 링크를 가지고 있는지 확인하십시오. 둘 다 #changedTable 각 탭마다 고유 한 href를 사용하십시오.

    두 번째로 탭 설정이 익숙하지 않은 것 같습니다. 어쩌면 괜찮지 만 항상 탭 div 안에 내용 div가 있습니다.

    as :

    <div id="tabs">
      <ul>
        <li><a href="#tab-1">Something</a></li>
        <li><a href="#tab-2">Something else</a></li>
      </ul>
      <div id="tab-1">
        <p>Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla.</p>
      </div>
      <div id="tab-2">
        <p>Curabitur ornare consequat nunc. Aenean vel metus.</p>
      </div>
    </div>
    
    

  • 답변 # 2

    탭의 href에는 # 기호가 있어야하고 탭 콘텐츠의 ID는 #을 가질 수 없습니다.

  • 답변 # 3

    내 경우는 태그 외부에있는 탭 콘텐츠였습니다. 공식 JQuery 예제 https://jqueryui.com/tabs/

    <!-- error  -->
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
      </ul>
    </div>
      <div id="tabs-1">
        <p>abc.</p>
      </div>
      <div id="tabs-2">
        <p>def.</p>
      </div>
      <div id="tabs-3">
        <p>ghi.</p>
      </div>
    <!-- correct -->
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
      </ul>
      <div id="tabs-1">
        <p>abc.</p>
      </div>
      <div id="tabs-2">
        <p>def.</p>
      </div>
      <div id="tabs-3">
        <p>ghi.</p>
      </div>
    </div>
    
    

  • 이전 vb.net - 다음 루프를 사용하여 원하는 방식으로 작동하도록 목록을 가져올 수 없습니다
  • 다음 텍스트를 iOS 시뮬레이터에 복사하십시오