title: pure Javascript and jQuery conflict
body: <p>So I have a tabbed menu with an arrow below that should move when I click on a specific tab.I am using pure JavaScript for the tabs and jQuery to move the arrow. The problem is that this works only when I delete one of the scripts. If I delete the jQuery script, the tabs are working and viceversa. Has anyone any idea what the problem may be? Here is the HTML    </p>
  
  <pre><code>&lt;div class="item active"&gt;
      &lt;ul class="tabbed-menu menu-list"&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_1', 'content_1');" id="tb_1" class="tabmenu active"&gt;Consultanță IT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu"&gt;Managementul Relațiilor cu Clienții&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_3', 'content_3');" id="tb_3" class="tabmenu"&gt;Business Intelligence&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_4', 'content_4');" id="tb_4" class="tabmenu"&gt;Turism și Ospitalitate&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu"&gt;Finanțe și Bănci&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="right carousel-control" href="#services-carousel" role="button" data-slide="next"&gt;Mai multe &lt;img src="images/right-arrow.png" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt; &lt;!--/.item active--&gt;
  
  &lt;div class="item"&gt;
      &lt;ul class="tabbed-menu menu-list"&gt;
          &lt;li&gt;&lt;a class="left carousel-control" href="#services-carousel" role="button" data-slide="prev"&gt;&lt;img src="images/left-arrow.png" alt=""&gt;Inapoi&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_6', 'content_6');" id="tb_6" class="tabmenu"&gt;Educatie&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_7', 'content_7');" id="tb_7" class="tabmenu"&gt;eCommerce&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_8', 'content_8');" id="tb_8" class="tabmenu"&gt;eLearning&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_9', 'content_9');" id="tb_9" class="tabmenu"&gt;Website&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:rudrSwitchTab('tb_10', 'content_10');" id="tb_10" class="tabmenu"&gt;mCommerce&lt;/a&gt;&lt;/li&gt;    
      &lt;/ul&gt;
  &lt;/div&gt; &lt;!--/.item--&gt;`
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>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 &lt; 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 &lt; x.length; i++) {
          x[i].className = 'tabmenu'; 
      }
      document.getElementById(rudr_tab_id).className = 'tabmenu active';
  }
  </code></pre>
  
  <p>and jQ</p>
  
  <pre><code>$(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();
      })
  })
  </code></pre>
  
  <p>Has anyone any idea what the problem may be? </p>