시맨틱 UI : 테이블 형식이 작동하지 않습니다.

Question

Semantic UI으로 작업 중이며 Tabs에 문제가 있습니다. 첫 번째 탭이 활성 탭으로 표시되지만 두 번째 탭을 클릭하면 탭이 변경되지 않습니다. "첨부 된 파일"에서 예제를 볼 수 있습니다. here. 아래 예제를 볼 수 있습니다. 나는 그것이 올바르게 설정되어 있다고 생각합니다. 또한 Semantic과 jQuery가 포함 된 JSFiddle을 설정했습니다. 궁금한 점이 있으면 알려주십시오.

<div class="ui top attached tabular menu"> 
    <a class="active item">One</a> 
    <a class="item">Two</a> 
</div> 
<div class="ui bottom attached segment"> 
    <h4>Product Name</h4> 
    <p>Here is the description</p> 
</div> 

Answer 1

탭을 연결하려면 JavaScript를 사용해야합니다.

$(document).ready(function(){ 
    $('.tabular.menu .item').tab({history:false}); 
}); 

http://jsfiddle.net/zu4kG/5/

는 또한이 블로그 게시물을 참조 : http://patrickgawron.com/wp/semantic-ui/

내가 jquery.address.js뿐만 아니라

를 추가 한 점에 유의하시기 바랍니다

나는 당신의 바이올린을 수정 한

Answer 2

내가 해결하고 싶었던 문제는 내가 Sem에 내장 된 행동을 일으킬만한 것을 놓쳤다 고 생각했다는 것이다. antic. 시맨틱 (Semantic)은 개발자가이 탭에서 자신 만의 액션을 생성 할 수있는 유연성을 제공하고자한다. 그들은 당신의 행동을위한 구조와 가능한 전환을 제공함으로써 그렇게합니다. 본질적으로,이 행동이 어떻게 작용할 수 있는지에 대한 많은 다른 해결책이 있습니다. 아래에서는 Semantic의 클래스와 jQuery를 사용하여 매우 간단한 솔루션을 제공했습니다. 여기에있다 JSFiddle.

$('.item').click(function(){ 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 3

같은 문제가있어이 답변은 올바른 방향을 가리키는 데 도움이됩니다. 내 문제는 결국 첫 번째 탭이 처음부터 올바르게 보이지 않아서 적어도 하나의 탭을 클릭해야한다는 것이 었습니다.

<div class="ui bottom attached active tab segment" data-tab="first"> 
    <h4>Product Name</h4> 
    <p>Here is the description</p> 
</div> 

"활성"클래스를 탭 콘텐츠 HTML 구조에 추가하면이 문제를 해결할 수 있습니다.