Bootstrap標籤插件無法正常工作

我已經下載了Bootstrap Tabcordion插件，即在加載移動屏幕時將選項卡摺疊爲手風琴。我無法使插件工作。我遵循指示，但我不知道如何調用這些函數。Bootstrap標籤插件無法正常工作

我的header.php文件包含bootstrap.min.js的鏈接，並且我已將標記代碼粘貼到我的WordPress管理頁面中。結果在我的網站上，內容就在那裏，並且也包含了一些CSS，但它並沒有使插件應該做什麼。

我該如何使用下載插件時獲得的.ZIP文件？我是否必須解壓並將插件的文件拖放到我的網站的根目錄中？

我header.php文件

<head> 
 
    <meta charset="<?php bloginfo('charset'); ?>"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content="Temporary Gallery, Centre for contemporary art, Köln" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="dist/css/bootstrap-responsive-tabs.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<head>

我的WordPress的管理頁面

<div class="tabcordion"> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active"><a data-target=".home">Home</a></li> 
 
    <li><a data-target=".profile">Profile</a></li> 
 
    <li><a data-target=".messages">Messages</a></li> 
 
    <li><a data-target=".settings">Settings</a></li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div class="home active in"> 
 
     <h3>Home</h3> 
 
     <p>Rhoncus magna nec enim, et proin aliquet mid, porta magnis.</p> 
 
    </div> 
 
    <div class="profile"> 
 
     <h3>Profile</h3> 
 
     <p>Odio mattis, non ut! Porttitor nunc phasellus cras elementum.</p> 
 
    </div> 
 
    <div class="messages"> 
 
     <h3>Messages</h3> 
 
     <p>Enim hac tristique elementum, nec rhoncus porttitor sagittis cum.</p> 
 
    </div> 
 
    <div class="settings"> 
 
     <h4>Settings</h4> 
 
     <p>Arcu auctor, porttitor tincidunt, aliquam ut ut, placerat porta pulvinar dictumst?</p> 
 
    </div> 
 
    </div> 
 
</div>

這個JavaScript，我不知道在哪裏貼：

$('.tabcordion').tabcordion()

來源

2017-09-01 Lolo

這是你的錯誤：

Uncaught TypeError: $(...).tabcordion is not a function 
    at index.html:41

你缺少tabcordion.js文件，其中該函數的定義。

從引導Tabcordion網站下載的ZIP壓縮文件，請按照它們的安裝程序（即涼亭安裝命令），並在HTML所需的文件：

<head> 
    <meta charset="<?php bloginfo('charset'); ?>"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="Temporary Gallery, Centre for contemporary art, Köln" /> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> 

    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script src="bower_components/tabcordion/tabcordion.js"></script> 
<head>

這裏是一個JSFiddle

來源

2017-09-01 11:37:01 RogerC

我不明白的涼亭install命令。你能向我解釋一下它應該如何進行嗎？ – Lolo

bower是您的網站開發項目的包管理器。檢查一下：http://bower.io你也需要安裝NPM – RogerC

你可以在不使用bower的情況下使用它。下載此腳本https://github.com/aexmachina/tabcordion/blob/master/tabcordion.js並將其包含在HTML頁面中。 – RogerC

你有錯過了HREF = 「」

請使用HREF

看到下面的代碼爲您的參考：

<ul class="nav nav-tabs"> 
<li class="active"><a data-toggle="tab" href=".home">Home</a></li> 
<li><a data-toggle="tab" href=".menu1">Menu 1</a></li> 
<li><a data-toggle="tab" href=".menu2">Menu 2</a></li> 
<li><a data-toggle="tab" href=".menu3">Menu 3</a></li>

來源

2017-09-01 11:40:13

他的HTML代碼很好。它實際上是來自Github頁面的複製粘貼。你的回答是誤導性的。 – RogerC

Bootstrap標籤插件無法正常工作

回答

相關問題