John Goldman John Goldman - 7 months ago 181
HTML Question

jquery-1.9.1.js:4421 Uncaught Error: Syntax error, unrecognized expression: /item/category/category_details/7

I am trying to implement bootstrap tabulation menu and each tab is a new page

This is my java script

<script type="text/javascript">
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
$(".act span").text(x);
$(".prev span").text(y);
});
});
</script>


And this is my html for tabulation menu

<div class="container">
<h2>Material</h2>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a href="/item/material/material_details/7">BOM</a></li>
<li role="presentation"><a href="/item/category/category_details/7">Manufacture</a></li>
<li role="presentation"><a href="/item/material/material_details/7">Product</a></li>
<li role="presentation"><a href="/item/material/material_details/7">UOM</a></li>
</ul>




And below the error I am getting each time I select a new tab and obviously my tab doesn't change to active. I assume I am trying to something that is not intended to work with direct links but should work only with divs on the same page. Is there is a way getting of tabulation effect in this way without having separate active tab menu for every page?

jquery-1.9.1.js:4421 Uncaught Error: Syntax error, unrecognized expression: /item/category/category_details/7

Answer

Bootstrap tabs expect the href to be a hash which is parsed as a selector, specifically an ID selector, by jQuery. That hash corresponds to the ID of the section to display. Your hrefs appear to be urls instead of hashes causing it to fail.