Bootstrap tabs not switching in Wordpress -


I am trying to use the Bootstrap tab in my WordPress project. I can see tabs in the browser window but tabs are not switching. I am using code. Tabs are basically examples from bootstrapdocs, which are repeated in many places in stack overflow. However in my Wordpress project they still do not switch.

  function jrtrs_add_bootstrap () {$ src = plugin_dir_url (__FILE__). 'Css / bootstrap.min.css'; wp_register_style ('trs_bootstrap-style', $ src); wp_enqueue_style ('trs_bootstrap style'); } // Add js script function jrtrs_add_scripts () {wp_enqueue_script ('jquery'); Wp_enqueue_script ('nav-tabs', plugin_dir_url (__FILE__). 'Js / bootstrap-tab.js', array ('jquery')); Wp_enqueue_script ('tracking-settings-ajax-request', plugin_dir_url (__FILE__). 'Js / tracking-settings.js', array ('jquery')); } Add_action ('wp_print_scripts', 'jrtrs_add_scripts'); Add_shortcode ('ms_betfair_plugin', 'jrtrs_display_form'); Function jrtrs_display_form () {jrtrs_add_bootstrap (); $ HtmlStr = & lt; & Lt; & Lt; EOD & lt ;! -------- & gt; & Lt; Div id = "content" & gt; & Lt; ul id = "tabs" class = "nav nav-tabs" data-tab = "tab" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "# red" data-toggle = "tab" & gt; Red & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; a href = "# orange" data-toggle = "tab" & gt; Orange & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; a href = "# yellow" data-toggle = "tab" & gt; Yellow & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "# green" data-toggle = "tab" & gt; Green & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "# blue" data-toggle = "tab" & gt; Blue & lt; / A & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; div id = "my-tab-content" class = "tab-content" & gt; & Lt; Div class = "tab-panel active" id = "red" & gt; & Lt; H1 & gt; Reeeeeeeeed & lt; / H1> & Lt; P & gt; Red red red red & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "tab-panel" id = "orange" & gt; & Lt; H1 & gt; Orange & lt; / H1> & Lt; P & gt; Orange orange orange orange orange & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "tab-panel" id = "yellow" & gt; & Lt; H1 & gt; Yellow & lt; / H1> & Lt; P & gt; Yellow yellowish yellow yellow & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "tab-panel" id = "green" & gt; & Lt; H1 & gt; Green & lt; / H1> & Lt; P & gt; Green green green green green & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "tab-panel" id = "blue" & gt; & Lt; H1 & gt; Blue & lt; / H1> & Lt; P & gt; Blue blue blue blue & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; The end of the day; $ HtmlStr; }   

... and javascript ....

  jQuery (document) .ready (function () {jQuery ('# tabs a') Click (function (e) {// alert ("tab clicked"); e.preventDefault (); jQuery (this) .tab ('show');})});    

I think you're doing something wrong to work on the Bootstrap tab Do not write any jQuery As soon as you leave in html, you should do the same work.

My best estimate is that there is a JavaScript error.

As a trouble-shooting task, I recommend downloading only the bootstrap tab and adding full bootstrap.js. Js

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -