Question

我正在尝试在我的wordpress项目中使用Bootstrap Tabs。我可以在浏览器窗口中看到选项卡，但选项卡没有切换。这是我正在使用的代码。这些选项卡基本上是Bootstrap文档中的示例，它们在stackoverflow中的许多位置重复。但是在我的Wordpress项目中，他们仍然没有切换。

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 scripts
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 = <<<EOD

    <!-------->
    <div id="content">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
            <li><a href="#orange" data-toggle="tab">Orange</a></li>
            <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
            <li><a href="#green" data-toggle="tab">Green</a></li>
            <li><a href="#blue" data-toggle="tab">Blue</a></li>
        </ul>
        <div id="my-tab-content" class="tab-content">
            <div class="tab-pane active" id="red">
                <h1>Reeeeeeeeed</h1>
                <p>red red red red red red</p>
            </div>
            <div class="tab-pane" id="orange">
                <h1>Orange</h1>
                <p>orange orange orange orange orange</p>
            </div>
            <div class="tab-pane" id="yellow">
                <h1>Yellow</h1>
                <p>yellow yellow yellow yellow yellow</p>
            </div>
            <div class="tab-pane" id="green">
                <h1>Green</h1>
                <p>green green green green green</p>
            </div>
            <div class="tab-pane" id="blue">
                <h1>Blue</h1>
                <p>blue blue blue blue blue</p>
            </div>
        </div>
    </div>


EOD;

    return $htmlStr;
}

...和JavaScript ......

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

Answer 1

我认为你误解了一些事情。您根本不必编写任何jQuery来使引导选项卡工作。你可以在下载HTML时立即工作。

我最好的猜测是有一个javascript错误。

作为一项故障排除任务，我建议下载并包含完整的bootstrap.js，而不仅仅是bootstrap-tab.js。

Bootstrap选项卡未在Wordpress中切换

1 个答案: