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标签插件无法正常工作

回答

相关问题