Jquery.js деактивировать tabbable navs от Bootstrap

Я работаю над веб-сайтом, и я столкнулся с проблемой с Twitter BootStrap.Jquery.js деактивировать tabbable navs от Bootstrap

У меня есть tabbable navs для навигации по различным видам, и в каждом представлении у меня есть карусель. Чтобы сделать работу карусели, мне пришлось добавить файл Jquery.js из Twitter. Но поскольку я добавил его, вкладки navs больше не работают. Я имею в виду, что есть больше, когда мой указатель находится на вкладке, но когда я нажимаю на него, ничего не происходит.

Я не знаю, есть ли конфликт между jquery.js и tabbable navs из Twitter BootStrap или если я сделал что-то не так. Таким образом, здесь мой код:

<head> 
    <!-- JS Files --> 
      <script src="bootstrap/js/jquery.js"></script> 
      <script src="bootstrap/js/bootstrap.js"></script> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        $('.carousel').carousel({ 
         interval: 3000 
        }); 

       $('.carousel').carousel('cycle'); 
       }); 
      </script> 
    </head> 
    <body> 

        <div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav"> 
        <li><a href="index.php">Accueil</a></li> 

        <li><a href="index.php?page=concept">Concept</a></li> 

        <li class="active"><a href="index.php?page=collections">Collections</a></li> 

        <li><a href="index.php?page=contact">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

      <ul class="breadcrumb"> 
        <li><a href="index.php">Accueil</a> <span class="divider">/</span></li> 
        <li><a href="index.php?page=collections">Collections</a> <span class="divider">/</span></li> 
        <li class="active">SummerSpring - Business Line</li> 
      </ul> 


     <div class="tabbable tabs-left"> 
      <ul class="nav nav-tabs"> 
        <li class="active"><a href="index.php?page=collections/summerspring" data-toggle="tab">Business Line</a></li> 
        <li><a href="index.php?page=collections/summerspring/ligneessentielle" data-toggle="tab">Ligne Essentielle</a></li> 
        <li><a href="index.php?page=collections/summerspring/blueline" data-toggle="tab">Blue Line</a></li> 
        <li><a href="index.php?page=collections/summerspring/blacklabel" data-toggle="tab">Black Label</a></li> 
        <li><a href="index.php?page=collections/summerspring/slimfit" data-toggle="tab">Slim Fit</a></li> 
        <li><a href="index.php?page=collections/summerspring/greybygrey" data-toggle="tab">Grey By Grey</a></li> 
      </ul> 

     <div class="tab-content"> 
     <div class="tab-pane active"> 

     <div class="row-fluid"> 


      <div class="span2"> 
      </div> 


      <div class="span8"> 
       <br> 

      <div id="myCarousel" class="carousel slide"> 
       <ol class="carousel-indicators"> 
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
        <li data-target="#myCarousel" data-slide-to="1"></li> 
        <li data-target="#myCarousel" data-slide-to="2"></li> 
       </ol> 
        <div class="carousel-inner"> 
         <div class="item active"> 
          <img src="images/showroomspirit.jpg" alt=""> 
           <div class="carousel-caption"> 
            <h4>First Thumbnail label</h4> 
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
           </div> 
         </div> 
         <div class="item"> 
          <img src="images/showroomspirit.jpg" alt=""> 
           <div class="carousel-caption"> 
            <h4>Second Thumbnail label</h4> 
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
           </div> 
         </div> 
         <div class="item"> 
          <img src="images/showroomspirit.jpg" alt=""> 
           <div class="carousel-caption"> 
            <h4>Third Thumbnail label</h4> 
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
           </div> 
         </div> 
        </div> 
           <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
           <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
      </div> 

      </div> 

      <div class="span2"> 
      </div> 

     </div> 
    </body>

Вы знаете, что это может быть?

источник

2013-04-16 TheJailbreakBay

Вы должны отформатировать (отступы) свой код, чтобы ваш вопрос был более читабельным и таким образом доступным для аудитории. Любая IDE должна быть в состоянии сделать это. И приветствуйте StackOverflow! – skuntsel

Поведение элементов привязки по умолчанию не выполняется из-за использования preventDefault() с вкладками Bootstrap.

Возможно, у вас есть возможность удалить атрибут data-toggle="tab" на .nav-tabs a, и он будет работать правильно.

Если это не сработает, вам необходимо, чтобы они снова функционировали как ссылки; это можно сделать, используя следующий код:

$('.nav-tabs a') 
    .filter('[href]').click(function(){ 
     window.location.href = $(this).attr('href'); 
    });

источник

2013-04-16 17:31:34

Я пробовал то, что вы только что отправили, но этот код только в том случае, если я хочу иметь все на одной странице и прокручивать его с помощью привязки для каждой вкладки, это не цель. Цель состоит в том, чтобы иметь разные страницы, и каждая вкладка перенаправляется на нее. – TheJailbreakBay

Я изменил свой оригинальный ответ - надеюсь, что это поможет! –

Это сработало. Спасибо огромное! – TheJailbreakBay

Jquery.js деактивировать tabbable navs от Bootstrap

ответ

Смежные вопросы