0
即時通訊使用joomla和作爲用戶註冊的一部分，我有字段分組到標籤（導航標籤）和Im試圖找到與jquery活動選項卡。Joomla註冊導航標籤，找到活動標籤
我在看下面的鏈接/代碼，在我的網站上演示的偉大工程，但不是：http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Tab_Events_Javascript.php
$(document).ready(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
var currentTab = $(e.target).text(); // get current tab
var LastTab = $(e.relatedTarget).text(); // get last tab
$(".current-tab span").html(currentTab);
$(".last-tab span").html(LastTab);
});
});.DemoBS3{
margin:40px;
}<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap : Tabs Events using Javascript </title>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="DemoBS3">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#android" data-toggle="tab">Android</a></li>
<li><a href="#microsoft" data-toggle="tab">microsoft</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">More..<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#twitter" tabindex="-1" data-toggle="tab">Twitter</a></li>
<li><a href="#wikipedia" tabindex="-1" data-toggle="tab">Wikipedia</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane in active" id="android">
<p>Android is an operating system based on the Linux kernel,
and designed primarily for touchscreen mobile devices
and tablet computers. Initially developed by Android, Inc.,
which was later bought in 2005 by Google Inc.</p>
</div>
<div class="tab-pane " id="microsoft">
<p>Microsoft Windows is a series of graphical
interface operating systems developed, marketed,
and sold by Microsoft</p>
</div>
<div class="tab-pane " id="twitter">
<p> Twitter is an online social networking and
microblogging service that enables users
to send and read "tweets", which are text
messages limited to 140 characters..</p>
</div>
<div class="tab-pane " id="wikipedia">
<p>Wikipedia is the worlds largest, collaboratively edited,
multilingual, free Internet encyclopedia that
is supported by the non-profit Wikimedia Foundation..</p>
</div>
</div>
<hr>
<p class="current-tab"><strong>Current Tab</strong>: <span></span></p>
<p class="last-tab"><strong>Last Tab</strong>: <span></span></p>
</div>
</body>
</html>我一直在試圖jquery的適應我的HTML ，但在這裏沒有運氣，任何幫助將非常感激！
.nav {
list-style: outside none none;
margin-bottom: 20px;
margin-left: 0;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: #eee;
text-decoration: none;
}
.nav > li > a > img {
max-width: none;
}
.nav > .pull-right {
float: right;
}
.nav-header {
color: #999;
display: block;
font-size: 11px;
font-weight: bold;
line-height: 20px;
padding: 3px 15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.nav li + .nav-header {
margin-top: 9px;
}
.nav-list {
margin-bottom: 0;
padding-left: 15px;
padding-right: 15px;
}
.nav-list > li > a, .nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus {
background-color: #08c;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.nav-list [class^="icon-"], .nav-list [class*=" icon-"] {
margin-right: 2px;
}
.nav-list .divider {
background-color: #e5e5e5;
border-bottom: 1px solid #fff;
height: 1px;
margin: 9px 1px;
overflow: hidden;
}
.nav-tabs, .nav-pills {
}
.nav-tabs::before, .nav-pills::before, .nav-tabs::after, .nav-pills::after {
content: "";
display: table;
line-height: 0;
}
.nav-tabs::after, .nav-pills::after {
clear: both;
}
.nav-tabs > li, .nav-pills > li {
float: left;
}
.nav-tabs > li > a, .nav-pills > li > a {
line-height: 14px;
margin-right: 2px;
padding-left: 12px;
padding-right: 12px;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: -1px;
}
.nav-tabs > li > a {
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
color: #5c4509;
font-size: 20px;
line-height: 20px;
padding-bottom: 8px;
padding-top: 8px;
text-decoration: none;
}
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
border-color: #eee #eee #ddd;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #fff;
border-color: #ddd #ddd transparent;
border-image: none;
border-style: solid;
border-width: 1px;
color: #000;
cursor: default;
}
.nav-pills > li > a {
border-radius: 5px;
margin-bottom: 2px;
margin-top: 2px;
padding-bottom: 8px;
padding-top: 8px;
}
.nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
background-color: #08c;
color: #fff;
}
.nav-stacked > li {
float: none;
}
.nav-stacked > li > a {
margin-right: 0;
}
.nav-tabs.nav-stacked {
border-bottom: 0 none;
}
.nav-tabs.nav-stacked > li > a {
border: 1px solid #ddd;
border-radius: 0;
}
.nav-tabs.nav-stacked > li:first-child > a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.nav-tabs.nav-stacked > li:last-child > a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.nav-tabs.nav-stacked > li > a:hover, .nav-tabs.nav-stacked > li > a:focus {
border-color: #ddd;
z-index: 2;
}
.nav-pills.nav-stacked > li > a {
margin-bottom: 3px;
}
.nav-pills.nav-stacked > li:last-child > a {
margin-bottom: 1px;
}
.nav-tabs .dropdown-menu {
border-radius: 0 0 6px 6px;
}
.nav-pills .dropdown-menu {
border-radius: 6px;
}
.nav .dropdown-toggle .caret {
border-bottom-color: #08c;
border-top-color: #08c;
margin-top: 6px;
}
.nav .dropdown-toggle:hover .caret, .nav .dropdown-toggle:focus .caret {
border-bottom-color: #005580;
border-top-color: #005580;
}
.nav-tabs .dropdown-toggle .caret {
margin-top: 8px;
}
.nav .active .dropdown-toggle .caret {
border-bottom-color: #fff;
border-top-color: #fff;
}
.nav-tabs .active .dropdown-toggle .caret {
border-bottom-color: #555;
border-top-color: #555;
}
.nav > .dropdown.active > a:hover, .nav > .dropdown.active > a:focus {
cursor: pointer;
}
.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover, .nav > li.dropdown.open.active > a:focus {
background-color: #999;
border-color: #999;
color: #fff;
}
.nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret, .nav li.dropdown.open a:focus .caret {
border-bottom-color: #fff;
border-top-color: #fff;
opacity: 1;
}
.tabs-stacked .open > a:hover, .tabs-stacked .open > a:focus {
border-color: #999;
}
.tabbable {
}
.tabbable::before, .tabbable::after {
content: "";
display: table;
line-height: 0;
}
.tabbable::after {
clear: both;
}
.tab-content {
overflow: auto;
}
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {
border-bottom: 0 none;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
}
.itemid-190 .tab-content > .tab-pane, .itemid-190 .pill-content > .pill-pane {
display: block;
}
.tab-content > .active, .pill-content > .active {
display: block;
}
.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-below > .nav-tabs > li {
margin-bottom: 0;
margin-top: -1px;
}
.tabs-below > .nav-tabs > li > a {
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus {
border-bottom-color: transparent;
border-top-color: #ddd;
}
.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd;
}
.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a {
margin-bottom: 3px;
margin-right: 0;
min-width: 74px;
}
.tabs-left > .nav-tabs {
border-right: 1px solid #ddd;
float: left;
margin-right: 19px;
}
.tabs-left > .nav-tabs > li > a {
border-radius: 4px 0 0 4px;
margin-right: -1px;
}
.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus {
border-color: #eee #ddd #eee #eee;
}
.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
}
.tabs-right > .nav-tabs {
border-left: 1px solid #ddd;
float: right;
margin-left: 19px;
}
.tabs-right > .nav-tabs > li > a {
border-radius: 0 4px 4px 0;
margin-left: -1px;
}
.tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus {
border-color: #eee #eee #eee #ddd;
}
.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
}
.nav > .disabled > a {
color: #999;
}
.nav > .disabled > a:hover, .nav > .disabled > a:focus {
background-color: transparent;
cursor: default;
text-decoration: none;
}
.navbar {
margin-bottom: 20px;
overflow: visible;
}
.navbar-inner {
background-color: #fafafa;
background-image: linear-gradient(to bottom, #fff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
}
.navbar-inner::before, .navbar-inner::after {
content: "";
display: table;
line-height: 0;
}
.navbar-inner::after {
clear: both;
}
.navbar .container {
width: auto;
}
.nav-collapse.collapse {
height: auto;
overflow: visible;
}
.navbar .brand {
color: #777;
display: block;
float: left;
font-size: 20px;
font-weight: 200;
margin-left: -20px;
padding: 10px 20px;
text-shadow: 0 1px 0 #fff;
}
.navbar .brand:hover, .navbar .brand:focus {
text-decoration: none;
}
.navbar-text {
color: #777;
line-height: 40px;
margin-bottom: 0;
}
.navbar-link {
color: #777;
}
.navbar-link:hover, .navbar-link:focus {
color: #333;
}
.navbar .divider-vertical {
border-left: 1px solid #f2f2f2;
border-right: 1px solid #fff;
height: 40px;
margin: 0 9px;
}
.navbar .btn, .navbar .btn-group {
margin-top: 5px;
}
.navbar .btn-group .btn, .navbar .input-prepend .btn, .navbar .input-append .btn, .navbar .input-prepend .btn-group, .navbar .input-append .btn-group {
margin-top: 0;
}
.navbar-form {
margin-bottom: 0;
}
.navbar-form::before, .navbar-form::after {
content: "";
display: table;
line-height: 0;
}
.navbar-form::after {
clear: both;
}
.navbar-form input, .navbar-form select, .navbar-form .radio, .navbar-form .checkbox {
margin-top: 5px;
}
.navbar-form input, .navbar-form select, .navbar-form .btn {
display: inline-block;
margin-bottom: 0;
}
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
}
.navbar-form .input-append, .navbar-form .input-prepend {
margin-top: 5px;
white-space: nowrap;
}
.navbar-form .input-append input, .navbar-form .input-prepend input {
margin-top: 0;
}
.navbar-search {
float: left;
margin-bottom: 0;
margin-top: 5px;
position: relative;
}
.navbar-search .search-query {
border-radius: 15px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
margin-bottom: 0;
padding: 4px 14px;
}
.navbar-static-top {
margin-bottom: 0;
position: static;
}
.navbar-static-top .navbar-inner {
border-radius: 0;
}
.navbar-fixed-top, .navbar-fixed-bottom {
left: 0;
margin-bottom: 0;
position: fixed;
right: 0;
z-index: 1030;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar-fixed-bottom .navbar-inner {
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
}
.navbar .nav {
display: block;
float: left;
left: 0;
margin: 0 10px 0 0;
position: relative;
}
.navbar .nav.pull-right {
float: right;
margin-right: 0;
}
.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
color: #777;
float: none;
padding: 10px 15px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
background-color: transparent;
color: #333;
text-decoration: none;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
background-color: #e5e5e5;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
color: #555;
text-decoration: none;
}
.navbar .btn-navbar {
background-color: #ededed;
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
color: #fff;
display: none;
float: right;
margin-left: 5px;
margin-right: 5px;
padding: 7px 10px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar .btn-navbar:hover, .navbar .btn-navbar:focus, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
background-color: #e5e5e5;
color: #fff;
}
.navbar .btn-navbar:active, .navbar .btn-navbar.active {
}
.navbar .btn-navbar .icon-bar {
background-color: #f5f5f5;
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
display: block;
height: 2px;
width: 18px;
}
.btn-navbar .icon-bar + .icon-bar {
margin-top: 3px;
}
.navbar .nav > li > .dropdown-menu::before {
border-bottom: 7px solid rgba(0, 0, 0, 0.2);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: inline-block;
left: 9px;
position: absolute;
top: -7px;
}
.navbar .nav > li > .dropdown-menu::after {
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
left: 10px;
position: absolute;
top: -6px;
}
.navbar-fixed-bottom .nav > li > .dropdown-menu::before {
border-bottom: 0 none;
border-top: 7px solid rgba(0, 0, 0, 0.2);
bottom: -7px;
top: auto;
}
.navbar-fixed-bottom .nav > li > .dropdown-menu::after {
border-bottom: 0 none;
border-top: 6px solid #fff;
bottom: -6px;
top: auto;
}
.navbar .nav li.dropdown > a:hover .caret, .navbar .nav li.dropdown > a:focus .caret {
border-bottom-color: #333;
border-top-color: #333;
}
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #e5e5e5;
color: #555;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-bottom-color: #777;
border-top-color: #777;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret, .navbar .nav li.dropdown.active > .dropdown-toggle .caret, .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-bottom-color: #555;
border-top-color: #555;
}
.navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
}
.navbar .pull-right > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu.pull-right::before {
left: auto;
right: 12px;
}
.navbar .pull-right > li > .dropdown-menu::after, .navbar .nav > li > .dropdown-menu.pull-right::after {
left: auto;
right: 13px;
}
.navbar .pull-right > li > .dropdown-menu .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
border-radius: 6px 0 6px 6px;
left: auto;
margin-left: 0;
margin-right: -1px;
right: 100%;
}
.navbar-inverse .navbar-inner {
background-color: #1b1b1b;
background-image: linear-gradient(to bottom, #222, #111);
background-repeat: repeat-x;
border-color: #252525;
}
.navbar-inverse .brand, .navbar-inverse .nav > li > a {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-inverse .brand:hover, .navbar-inverse .nav > li > a:hover, .navbar-inverse .brand:focus, .navbar-inverse .nav > li > a:focus {
color: #fff;
}
.navbar-inverse .brand {
color: #999;
}
.navbar-inverse .navbar-text {
color: #999;
}
.navbar-inverse .nav > li > a:focus, .navbar-inverse .nav > li > a:hover {
background-color: transparent;
color: #fff;
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #111;
color: #fff;
}
.navbar-inverse .navbar-link {
color: #999;
}
.navbar-inverse .navbar-link:hover, .navbar-inverse .navbar-link:focus {
color: #fff;
}
.navbar-inverse .divider-vertical {
border-left-color: #111;
border-right-color: #222;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #111;
color: #fff;
}
.navbar-inverse .nav li.dropdown > a:hover .caret, .navbar-inverse .nav li.dropdown > a:focus .caret {
border-bottom-color: #fff;
border-top-color: #fff;
}
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
border-bottom-color: #999;
border-top-color: #999;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-bottom-color: #fff;
border-top-color: #fff;
}
.navbar-inverse .navbar-search .search-query {
background-color: #515151;
border-color: #111;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
color: #fff;
transition: none 0s ease 0s ;
}
.navbar-inverse .navbar-search .search-query:-moz-placeholder {
color: #ccc;
}
.navbar-inverse .navbar-search .search-query:focus, .navbar-inverse .navbar-search .search-query.focused {
background-color: #fff;
border: 0 none;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
color: #333;
outline: 0 none;
padding: 5px 15px;
text-shadow: 0 1px 0 #fff;
}
.navbar-inverse .btn-navbar {
background-color: #0e0e0e;
background-image: linear-gradient(to bottom, #151515, #040404);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-inverse .btn-navbar:hover, .navbar-inverse .btn-navbar:focus, .navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active, .navbar-inverse .btn-navbar.disabled, .navbar-inverse .btn-navbar[disabled] {
background-color: #040404;
color: #fff;
}
.navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active {
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="profile_tabs" class="nav nav-tabs">
\t <li><a href="#tab0">test-tab-1</a></li>
\t <li><a href="#tab1">test-tab-2</a></li>
\t <li><a href="#tab2">test-tab-3</a></li>
\t <li><a href="#tab3">test-tab-4</a></li>
\t <li><a href="#tab4">test-tab-5</a></li>
</ul>
<form id="member-registration" action="/register?task=registration.register" method="post" class="form-validate form-horizontal well" enctype="multipart/form-data">
<div id="profile_content" class="tab-content">
\t <div id="tab0" class="tab-pane">
<div>test-tab-contents-1</div>
</div>
\t <div id="tab1" class="tab-pane">
<div>test-tab-contents-2</div>
</div>
\t <div id="tab2" class="tab-pane">
\t <div>test-tab-contents-3</div>
</div>
\t <div id="tab3" class="tab-pane">
\t <div>test-tab-contents-4</div>
</div>
\t <div id="tab4" class="tab-pane">
<div>test-tab-contents-5</div>
</div>
</div>
</form> \t
</body>
</html>許多在此先感謝！