href가 아닌 data-target 탭이 있는 경우 부트스트랩 탭이 작동하지 않음

href가 아닌 data-target 탭이 있는 경우 부트스트랩 탭이 작동하지 않음

다음을 사용하여 부트스트랩 탭을 개발하고 있습니다.data-target탭 페인과 일치하도록 속성을 지정합니다.hrefattribute, 각도 앱을 개발 중이기 때문에)href루트를 망칠 수도 있습니다).

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="home">Home</a></li>
    <li><a data-target="profile">Profile</a></li>
    <li><a data-target="messages">Messages</a></li>
    <li><a data-target="settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
 </div>

<script>
    jQuery(function () {
        jQuery('#myTab a:last').tab('show')
    })
</script>

이 바이올린 http://jsfiddle.net/xFW8t/4/을 참조하십시오.거기서 나는 전체를 재현했다.

탭에는 부트스트랩 스타일을 적용하고 싶지 않고 기능만 적용하고 스타일을 적용하고 싶은데, 부트스트랩 스타일은 적용하지 않는 건가요?도움이 필요하시면 미리 이 감사를 드립니다.

더하다data-toggle="tab"마크업 속성

<a data-target="#home" data-toggle="tab">Home</a>

Js Fidle 데모

다음과 같이 시도합니다.

jQuery(function () {
    jQuery('#myTab a').on('click', function() {
        $(this).tab('show');
    });
})

@Sachin에서 언급했듯이,data-toggle기여하다.그 외, 올바른 기입이 되어 있는 것을 확인해 주세요.data-targets. 이러한 셀렉터는 요소 ID가 아닌 jQuery 셀렉터와 함께 사용합니다.`data-target.(링크)

사용하시는 경우data-toggle="tab"- js 초기화를 삭제할 수 있습니다.

<script>
    jQuery(function () {
        jQuery('#myTab a:last').tab('show')
    })
</script>

부트스트랩은 탭을 자동으로 초기화합니다.

탭을 수동으로 초기화하려면 다음을 제거할 수 있습니다.data-toggle="tab"모든 탭에서 레이아웃 및 it를 개별적으로 선택합니다.

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

언급URL : https://stackoverflow.com/questions/19225968/bootstrap-tab-is-not-working-when-tab-with-data-target-instead-of-href