чистый конфликт Javascript и jQuery

Итак, у меня есть меню с вкладкой со стрелкой ниже, которое должно двигаться, когда я нажимаю на конкретную вкладку. Я использую чистый JavaScript для вкладок и jQuery для перемещения стрелки. Проблема в том, что это работает только при удалении одного из скриптов. Если я удалю скрипт jQuery, вкладки будут работать и наоборот. Кто-нибудь знает, в чем проблема? Вот HTMLчистый конфликт Javascript и jQuery

<div class="item active"> 
    <ul class="tabbed-menu menu-list"> 
     <li><a href="javascript:rudrSwitchTab('tb_1', 'content_1');" id="tb_1" class="tabmenu active">Consultanță IT</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Managementul Relațiilor cu Clienții</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_3', 'content_3');" id="tb_3" class="tabmenu">Business Intelligence</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_4', 'content_4');" id="tb_4" class="tabmenu">Turism și Ospitalitate</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu">Finanțe și Bănci</a></li> 
     <li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li> 
     </ul> 
</div> <!--/.item active--> 

<div class="item"> 
    <ul class="tabbed-menu menu-list"> 
     <li><a class="left carousel-control" href="#services-carousel" role="button" data-slide="prev"><img src="images/left-arrow.png" alt="">Inapoi</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_6', 'content_6');" id="tb_6" class="tabmenu">Educatie</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_7', 'content_7');" id="tb_7" class="tabmenu">eCommerce</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_8', 'content_8');" id="tb_8" class="tabmenu">eLearning</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_9', 'content_9');" id="tb_9" class="tabmenu">Website</a></li> 
     <li><a href="javascript:rudrSwitchTab('tb_10', 'content_10');" id="tb_10" class="tabmenu">mCommerce</a></li>  
    </ul> 
</div> <!--/.item-->`

Javascript

function rudrSwitchTab(rudr_tab_id, rudr_tab_content) { 
// first of all we get all tab content blocks 
    var x = document.getElementsByClassName("tabcontent"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = 'none'; // hide all tab content 
    } 
    document.getElementById(rudr_tab_content).style.display = 'block'; // display the content of the tab we need 

    // now we get all tab menu items by class names (use the next code only if you need to highlight current tab) 
    var x = document.getElementsByClassName("tabmenu"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     x[i].className = 'tabmenu'; 
    } 
    document.getElementById(rudr_tab_id).className = 'tabmenu active'; 
}

и JQ

$(document).ready(function(){ 

    $('ul.menu-list li').click(function(event) { 
     var position = $(this).position(); 
     var width = Math.round($(this).width()/2) - 5; 

     // alert(width); 

     $(".arrow-marker").css('left', 'auto').stop().transition({ x: position.left + width }); 
     event.preventDefault(); 
    }) 
})

Кто-нибудь любая идея, что проблема может быть?

источник

2015-07-29 Valeria Melinte

Почему бы не использовать jquery (или не использовать jquery) для всего? вы можете добавить jsfiddle – atmd

Вы проверили вашу консоль браузера на наличие ошибок? Если нет, проверьте и обновите описание вопроса с помощью отчета об ошибке. – NewToJS

Можете ли вы отредактировать сообщение, чтобы код был правильно структурирован? Используйте значок {} на панели инструментов. – SiXoS

Вы используете event.preventDefault(); в своем jQuery, что в основном предотвращает эту ссылку: href. Таким образом, javascript, который вы разместили в ваших ссылках, не будет исполнен - href - это именно то событие. preventDefault(); Предполагается, что предотвратить. Тип имени, которое подходит :)

источник

2015-07-29 13:47:03 connexo

Сначала проверьте консоль. Если это ошибка конфликта jquery. Используйте эту строку ниже, прежде чем запускать код jquery.

$.noConflict();

источник

2015-07-29 12:51:52 Garima

Пробуйте, чтобы использовать Jquery никакого конфликта

https://api.jquery.com/jquery.noconflict/

увидеть здесь, чтобы поймать данные этой функции

источник

2015-07-29 12:52:42

<ul class="tabbed-menu menu-list"> 
    <li><a href="#" id="tb_1" tab-id='content_1' class="tabmenu active">Consultanță IT</a></li> 
    <li><a href="#" id="tb_2" tab-id='content_2' class="tabmenu">Managementul Relațiilor cu Clienții</a></li> 
    <li><a href="#" id="tb_3" tab-id='content_3' class="tabmenu">Business Intelligence</a></li> 
    <li><a href="#" id="tb_4" tab-id='content_4' class="tabmenu">Turism și Ospitalitate</a></li> 
    <li><a href="#" id="tb_5" tab-id='content_5' class="tabmenu">Finanțe și Bănci</a></li> 
    <li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li> 
</ul>

Я сделал эти изменения

rudrSwitchTab($(this).attr('id'), $(this).attr('tab-id')); 
    event.preventDefault();

И Теперь все это работает

источник

2015-07-29 13:33:30

чистый конфликт Javascript и jQuery

ответ

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