Rails应用上的JavaScript问题。
Twitter文档使事情变得非常简单，但是我仍然无法使选项卡动态地工作(选项卡切换和下拉菜单)。我直接复制了他们的源代码并下载了他们的JavaScript，并将其包含在我的rails应用程序的application.js文件中。不知道我在想什么。
HTML文件:
<script>
$(function () {
$('#.tabs').bind('change', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
</script>
<h3>Demo</h3>
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
<li class="dropdown" data-dropdown="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
</ul>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="active tab-pane" id="home">
<p>Lorem Ipsum.</p>
Application.js文件:
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
$(document).ready(function(){
!function( $ ){
"use strict"
function activate ( element, container ) {
container
.find('> .active')
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
}
function tab( e ) {
var $this = $(this)
, $ul = $this.closest('ul:not(.dropdown-menu)')
, href = $this.attr('href')
, previous
, $href
if ( /^#\w+/.test(href) ) {
e.preventDefault()
if ( $this.parent('li').hasClass('active') ) {
return
}
previous = $ul.find('.active a').last()[0]
$href = $(href)
activate($this.parent('li'), $ul)
activate($href, $href.parent())
$this.trigger({
type: 'change'
, relatedTarget: previous
})
}
}
/* TABS/PILLS PLUGIN DEFINITION
* ============================ */
$.fn.tabs = $.fn.pills = function ( selector ) {
return this.each(function () {
$(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
})
}
$(document).ready(function () {
$('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
})
}( window.jQuery || window.ender );
});
最佳答案
您不需要第一个脚本(文档中仅作为示例提供了此脚本，以防您想要超出包装盒中的内容)
您需要做的是引导样式表的链接:
<link rel="stylesheet" href="your_bootstrap_folder/bootstrap.min.css">
和两个脚本(假设您有jquery，否则首先包括该脚本):
<script type="text/javascript" src="your_bootstrap_folder/js/bootstrap-tabs.js"></script>
<script type="text/javascript" src="your_bootstrap_folder/js/bootstrap-dropdown.js"></script>
最后是函数调用
<script>
$(function () {
$('.tabs').tabs()
})
</script>
这应该够了吧。
编辑:只是为了确保您有正确的序列，这是一个完整的示例:
<!DOCTYPE html>
<html>
<head>
<title>bootstrap tabs test</title>
<link rel="stylesheet" href="path_to_bootstrap/bootstrap.min.css">
</head>
<body>
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
<li data-dropdown="dropdown" class="dropdown">
<a class="dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="path_to_jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="path_to_bootstrap/js/bootstrap-tabs.js"></script>
<script type="text/javascript" src="path_to_bootstrap/js/bootstrap-dropdown.js"></script>
<script>
$(function () {
$('.tabs').tabs()
})
</script>
</body>
</html>