Tabs Dificuldade em mudar de tab

[klasss]

tenho este código em que a Tab nao muda de página. (http://jsfiddle.net/vk5bevot/)

Será que algum me consegue ajudar?

<script type="text/javascript">
$('#myTab a').click(function (e) {
if($(this).parent('li').hasClass('active')){
 $( $(this).attr('href') ).hide();
}
else {
 e.preventDefault();
 $(this).tabs('show');
}
});


</script>

<div class="container">
 <h1>teste</h1>
<ul class="tabs">
 <li><a href="#tab1">1</a>
 </li>
 <li><a href="#tab2">2</a>
 </li>
 <li><a href="#tab3">3</a>
 </li>
 <li><a href="#tab4">4</a>
 </li>
 <li><a href="#tab5">5</a>
 </li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
 Conteúdo da tab 1
</div>
<div id="tab2" class="tab_content">
 Conteúdo da tab 2
</div>
<div id="tab3" class="tab_content">
 Conteúdo da tab 3
</div>
<div id="tab4" class="tab_content">
 Conteúdo da tab 4
</div>
<div id="tab5" class="tab_content">
 Conteúdo da tab 5
</div>
</div>
</div>

.nave {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nave > li {
position: relative;
display: block;
}
.nave > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nave > li > a:hover,
.nave > li > a:focus {
text-decoration: none;
background-color: #eee;
}
.nave > li.disabled > a {
color: #777;
}
.nave > li.disabled > a:hover,
.nave > li.disabled > a:focus {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.nave .open > a,
.nave .open > a:hover,
.nave .open > a:focus {
background-color: #eee;
border-color: #337ab7;
}
.nave .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nave > li > a > img {
max-width: none;
}
.nave-tabs {
border-bottom: 1px solid #ddd;
}
.nave-tabs > li {
float: left;
margin-bottom: -1px;
}
.nave-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nave-tabs > li > a:hover {
border-color: #eee #eee #ddd;
}
.nave-tabs > li.active > a,
.nave-tabs > li.active > a:hover,
.nave-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nave-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nave-tabs.nav-justified > li {
float: none;
}
.nave-tabs.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nave-tabs.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nave-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nave-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
.nave-tabs.nav-justified > li > a {
margin-right: 0;
border-radius: 4px;
}
.nave-tabs.nav-justified > .active > a,
.nave-tabs.nav-justified > .active > a:hover,
.nave-tabs.nav-justified > .active > a:focus {
border: 1px solid #ddd;
}
@media (min-width: 768px) {
.nave-tabs.nav-justified > li > a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nave-tabs.nav-justified > .active > a,
.nave-tabs.nav-justified > .active > a:hover,
.nave-tabs.nav-justified > .active > a:focus {
border-bottom-color: #fff;
}
}
.nave-pills > li {
float: left;
}
.nave-pills > li > a {
border-radius: 4px;
}
.nave-pills > li + li {
margin-left: 2px;
}
.nave-pills > li.active > a,
.nave-pills > li.active > a:hover,
.nave-pills > li.active > a:focus {
color: #fff;
background-color: #337ab7;
}
.nave-stacked > li {
float: none;
}
.nave-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
.nave-justified {
width: 100%;
}
.nave-justified > li {
float: none;
}
.nave-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nave-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nave-justified > li {
display: table-cell;
width: 1%;
}
.nave-justified > li > a {
margin-bottom: 0;
}
}
.nave-tabs-justified {
border-bottom: 0;
}
.nave-tabs-justified > li > a {
margin-right: 0;
border-radius: 4px;
}
.nave-tabs-justified > .active > a,
.nave-tabs-justified > .active > a:hover,
.nave-tabs-justified > .active > a:focus {
border: 1px solid #ddd;
}
@media (min-width: 768px) {
.nave-tabs-justified > li > a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nave-tabs-justified > .active > a,
.nave-tabs-justified > .active > a:hover,
.nave-tabs-justified > .active > a:focus {
border-bottom-color: #fff;
}
}


.containerIndex {
padding-right: 46%;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: absolute;
top: 37%;
}
@media (min-width: 768px) {
.containerIndex {
width: 750px;
}
}
@media (min-width: 992px) {
.containerIndex {
width: 970px;
}
}
@media (min-width: 1200px) {
.containerIndex {
width: 1170px;
}
}
.containerIndex-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}


.tabs-content > .tabs-pane {
display: none;
}
.tabs-content > .active {
display: block;
}
.nave-tabs .dropdown-menu {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navebar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
@media (min-width: 768px) {
.navebar {
border-radius: 4px;
}
}
@media (min-width: 768px) {
.navebar-header {
float: left;
}
}
.navebar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navebar-collapse.in {
overflow-y: auto;
}
@media (min-width: 768px) {
.navebar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
	 box-shadow: none;
}
.navebar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navebar-collapse.in {
overflow-y: visible;
}
.navebar-fixed-top .navebar-collapse,
.navebar-static-top .navebar-collapse,
.navebar-fixed-bottom .navebar-collapse {
padding-right: 0;
padding-left: 0;
}
}
.navebar-fixed-top .navebar-collapse,
.navebar-fixed-bottom .navebar-collapse {
max-height: 340px;
}
@media (max-device-width: 480px) and (orientation: landscape) {
.navebar-fixed-top .navebar-collapse,
.navebar-fixed-bottom .navebar-collapse {
max-height: 200px;
}
}
.containerIndex > .navebar-header,
.containerIndex-fluid > .navebar-header,
.containerIndex > .navebar-collapse,
.containerIndex-fluid > .navebar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.containerIndex > .navebar-header,
.containerIndex-fluid > .navebar-header,
.containerIndex > .navebar-collapse,
.containerIndex-fluid > .navebar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navebar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.navebar-static-top {
border-radius: 0;
}
}
.navebar-fixed-top,
.navebar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
@media (min-width: 768px) {
.navebar-fixed-top,
.navebar-fixed-bottom {
border-radius: 0;
}
}
.navebar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navebar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
border-width: 1px 0 0;
}
.navebar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navebar-brand:hover,
.navebar-brand:focus {
text-decoration: none;
}
.navebar-brand > img {
display: block;
}
@media (min-width: 768px) {
.navebar > .container .navbar-brand,
.navebar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navebar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navebar-toggle:focus {
outline: 0;
}
.navebar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navebar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: 768px) {
.navebar-toggle {
display: none;
}
}
.navebar-nave {
margin: 7.5px -15px;
}
.navebar-nave > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
@media (max-width: 767px) {
.navebar-nave .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
	 box-shadow: none;
}
.navebar-nave .open .dropdown-menu > li > a,
.navebar-nave .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navebar-nave .open .dropdown-menu > li > a {
line-height: 20px;
}
.navebar-nave .open .dropdown-menu > li > a:hover,
.navebar-nave .open .dropdown-menu > li > a:focus {
background-image: none;
}
}
@media (min-width: 768px) {
.navebar-nave {
float: left;
margin: 0;
}
.navebar-nave > li {
float: left;
}
.navebar-nave> li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
.navebar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
	 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
@media (min-width: 768px) {
.navebar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navebar-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.navebar-form .form-control-static {
display: inline-block;
}
.navebar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navebar-form .input-group .input-group-addon,
.navebar-form .input-group .input-group-btn,
.navebar-form .input-group .form-control {
width: auto;
}
.navebar-form .input-group > .form-control {
width: 100%;
}
.navebar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navebar-form .radio,
.navebar-form .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.navebar-form .radio label,
.navebar-form .checkbox label {
padding-left: 0;
}
.navebar-form .radio input[type="radio"],
.navebar-form .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.navebar-form .has-feedback .form-control-feedback {
top: 0;
}
}
@media (max-width: 767px) {
.navebar-form .form-group {
margin-bottom: 5px;
}
.navebar-form .form-group:last-child {
margin-bottom: 0;
}
}
@media (min-width: 768px) {
.navebar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
	 box-shadow: none;
}
}
.navebar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navebar-fixed-bottom .navebar-nav > li > .dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navebar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navebar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
}
.navebar-text {
margin-top: 15px;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.navebar-text {
float: left;
margin-right: 15px;
margin-left: 15px;
}
}
@media (min-width: 768px) {
.navebar-left {
float: left !important;
}
.navebar-right {
float: right !important;
margin-right: -15px;
}
.navebar-right ~ .navbar-right {
margin-right: 0;
}
}
.navebar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navebar-default .navebar-brand {
color: #777;
}
.navebar-default .navebar-brand:hover,
.navebar-default .navebar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navebar-default .navebar-text {
color: #777;
}
.navebar-default .navebar-nav > li > a {
color: #777;
}
.navebar-default .navebar-nav > li > a:hover,
.navebar-default .navebar-nav > li > a:focus {
color: #333;
background-color: transparent;
}
.navebar-default .navebar-nav > .active > a,
.navebar-default .navebar-nav > .active > a:hover,
.navebar-default .navebar-nav > .active > a:focus {
color: #555;
background-color: #e7e7e7;
}
.navebar-default .navebar-nav > .disabled > a,
.navebar-default .navebar-nav > .disabled > a:hover,
.navebar-default .navebar-nav > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
.navebar-default .navebar-toggle {
border-color: #ddd;
}
.navebar-default .navebar-toggle:hover,
.navebar-default .navebar-toggle:focus {
background-color: #ddd;
}
.navebar-default .navebar-toggle .icon-bar {
background-color: #888;
}
.navebar-default .navebar-collapse,
.navebar-default .navebar-form {
border-color: #e7e7e7;
}
.navebar-default .navebar-nave > .open > a,
.navebar-default .navebar-nave > .open > a:hover,
.navebar-default .navebar-nave > .open > a:focus {
color: #555;
background-color: #e7e7e7;
}
@media (max-width: 767px) {
.navebar-default .navebar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navebar-default .navebar-nav .open .dropdown-menu > li > a:hover,
.navebar-default .navebar-nav .open .dropdown-menu > li > a:focus {
color: #333;
background-color: transparent;
}
.navebar-default .navebar-nav .open .dropdown-menu > .active > a,
.navebar-default .navebar-nav .open .dropdown-menu > .active > a:hover,
.navebar-default .navebar-nav .open .dropdown-menu > .active > a:focus {
color: #555;
background-color: #e7e7e7;
}
.navebar-default .navebar-nav .open .dropdown-menu > .disabled > a,
.navebar-default .navebar-nav .open .dropdown-menu > .disabled > a:hover,
.navebar-default .navebar-nav .open .dropdown-menu > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
}
.navebar-default .navbar-link {
color: #777;
}
.navebar-default .navebar-link:hover {
color: #333;
}
.navebar-default .btn-link {
color: #777;
}
.navebar-default .btn-link:hover,
.navebar-default .btn-link:focus {
color: #333;
}
.navebar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navebar-default .btn-link[disabled]:focus,
fieldset[disabled] .navebar-default .btn-link:focus {
color: #ccc;
}
.navebar-inverse {
background-color: #222;
border-color: #080808;
}
.navebar-inverse .navebar-brand {
color: #9d9d9d;
}
.navebar-inverse .navebar-brand:hover,
.navebar-inverse .navebar-brand:focus {
color: #fff;
background-color: transparent;
}
.navebar-inverse .navebar-text {
color: #9d9d9d;
}
.navebar-inverse .navebar-nave > li > a {
color: #9d9d9d;
}
.navebar-inverse .navbar-nave > li > a:hover,
.navebar-inverse .navbar-nave > li > a:focus {
color: #fff;
background-color: transparent;
}
.navebar-inverse .navebar-nave > .active > a,
.navebar-inverse .navebar-nave > .active > a:hover,
.navebar-inverse .navebar-nave > .active > a:focus {
color: #fff;
background-color: #080808;
}
.navebar-inverse .navebar-nave > .disabled > a,
.navebar-inverse .navebar-nave > .disabled > a:hover,
.navebar-inverse .navebar-nave > .disabled > a:focus {
color: #444;
background-color: transparent;
}
.navebar-inverse .navbar-toggle {
border-color: #333;
}
.navebar-inverse .navebar-toggle:hover,
.navebar-inverse .navebar-toggle:focus {
background-color: #333;
}
.navebar-inverse .navebar-toggle .icon-bar {
background-color: #fff;
}
.navebar-inverse .navebar-collapse,
.navebar-inverse .navebar-form {
border-color: #101010;
}
.navebar-inverse .navebar-nav > .open > a,
.navebar-inverse .navebar-nav > .open > a:hover,
.navebar-inverse .navebar-nav > .open > a:focus {
color: #fff;
background-color: #080808;
}
@media (max-width: 767px) {
.navebar-inverse .navebar-nave .open .dropdown-menu > .dropdown-header {
border-color: #080808;
}
.navebar-inverse .navebar-nave .open .dropdown-menu .divider {
background-color: #080808;
}
.navebar-inverse .navebar-nave .open .dropdown-menu > li > a {
color: #9d9d9d;
}
.navebar-inverse .navebar-nave .open .dropdown-menu > li > a:hover,
.navebar-inverse .navebar-nave .open .dropdown-menu > li > a:focus {
color: #fff;
background-color: transparent;
}
.navebar-inverse .navebar-nave .open .dropdown-menu > .active > a,
.navebar-inverse .navebar-nave .open .dropdown-menu > .active > a:hover,
.navebar-inverse .navebar-nave .open .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #080808;
}
.navebar-inverse .navebar-nave .open .dropdown-menu > .disabled > a,
.navebar-inverse .navebar-nave .open .dropdown-menu > .disabled > a:hover,
.navebar-inverse .navebar-nave .open .dropdown-menu > .disabled > a:focus {
color: #444;
background-color: transparent;
}
}
.navebar-inverse .navbar-link {
color: #9d9d9d;
}
.navebar-inverse .navbar-link:hover {
color: #fff;
}
.navebar-inverse .btn-link {
color: #9d9d9d;
}
.navebar-inverse .btn-link:hover,
.navebar-inverse .btn-link:focus {
color: #fff;
}
.navebar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navebar-inverse .btn-link:hover,
.navebar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navebar-inverse .btn-link:focus {
color: #444;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}

.containertab {
position: absolute;
left: 1%;
top: 34%;
width: 40%;
margin: 2% auto; }
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style:none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #F0F0F0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.0em;
padding: 0 20px;
border: 1px solid #999999;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
ul.tabs li a:after {
content: '\25CF';
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #F0F0F0;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 0.9em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: right;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.SaberMais {
float: Right;
border: 1px solid #ddd;
padding: 2px;
 font-size: 0.8em;
}
.nounderline:link
{
text-decoration:none;
}

Obrigado

Edited April 21, 2015 at 08:33 AM by klasss
geshi

[HappyHippyHippo]

o jsfiddle funciona para mim ...

[klasss]

Erro no Jsfiddle ... http://jsfiddle.net/vk5bevot/

[Tiiagu]

Deixo-te aqui um exemplo de um mais bonito e funcionário :

http://codepen.io/cssjockey/pen/jGzuK

[klasss]

Estou a fazer varios a ver qual fica mais bonito visualmente.

Obrigado.

Preciso de uma informação ou onde posso ver como fazer para que as tabs de X em X tempos mude de tab?

[Rechousa]

Viva,

Fiz um fork à sugestão do @Tiiagu.

Aqui vai: http://codepen.io/Rechousa/pen/eNYZpm