Joomla注册导航标签，找到活动标签

时间：2016-08-04 11:18:03

标签： jquery twitter-bootstrap joomla html-lists registration

我使用joomla并作为用户注册的一部分，我将字段组合在一起成为选项卡（导航标签），我试图找到带有jquery的活动标签。

我正在查看以下链接/代码，该代码在演示中效果很好，但在我的网站上却没有：http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Tab_Events_Javascript.php

＆＃13;
＆＃13; 
$(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);
    });
});
＆＃13; 
.DemoBS3{
      margin:40px;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

我一直在尝试将jquery改编为我的html，但这里没有运气，任何帮助都会非常感激!!!!

＆＃13;
＆＃13; 
.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 {
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
      <title></title>
</head>

<body>
<ul id="profile_tabs" class="nav nav-tabs">
	<li><a href="#tab0">test-tab-1</a></li>
	<li><a href="#tab1">test-tab-2</a></li>
	<li><a href="#tab2">test-tab-3</a></li>
	<li><a href="#tab3">test-tab-4</a></li>
	<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">
	<div id="tab0" class="tab-pane">
          <div>test-tab-contents-1</div>
    </div>
	<div id="tab1" class="tab-pane">
          <div>test-tab-contents-2</div>
    </div>
	<div id="tab2" class="tab-pane">
    	  <div>test-tab-contents-3</div>
    </div>
	<div id="tab3" class="tab-pane">
    	  <div>test-tab-contents-4</div>
    </div>
	<div id="tab4" class="tab-pane">
          <div>test-tab-contents-5</div>
    </div>
  </div>
</form>	
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

非常感谢提前！

1 个答案:

答案 0 :(得分：1)

对于您的帮助，您错过了html中的jquery代码和数据切换属性。

$('#profile_tabs').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

<强> HTML 

<li><a href="#tab0" data-toggle="tab">test-tab-1</a></li>
<li><a href="#tab1" data-toggle="tab">test-tab-2</a></li>
<li><a href="#tab2" data-toggle="tab">test-tab-3</a></li>
<li><a href="#tab3" data-toggle="tab">test-tab-4</a></li>
<li><a href="#tab4" data-toggle="tab">test-tab-5</a></li>


.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>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#profile_tabs').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})
</script>
</head>

<body>
<ul id="profile_tabs" class="nav nav-tabs">
<li><a href="#tab0" data-toggle="tab">test-tab-1</a></li>
<li><a href="#tab1" data-toggle="tab">test-tab-2</a></li>
<li><a href="#tab2" data-toggle="tab">test-tab-3</a></li>
<li><a href="#tab3" data-toggle="tab">test-tab-4</a></li>
<li><a href="#tab4" data-toggle="tab">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">
	<div id="tab0" class="tab-pane">
          <div>test-tab-contents-1</div>
    </div>
	<div id="tab1" class="tab-pane">
          <div>test-tab-contents-2</div>
    </div>
	<div id="tab2" class="tab-pane">
    	  <div>test-tab-contents-3</div>
    </div>
	<div id="tab3" class="tab-pane">
    	  <div>test-tab-contents-4</div>
    </div>
	<div id="tab4" class="tab-pane">
          <div>test-tab-contents-5</div>
    </div>
  </div>
</form>	
</body>
</html>

相关问题
最新问题