Tabbed Navigation with CSS and jQuery

Asked

Viewed 586 times

0

I have a problem formatting my page...

<ul class="abas">
    <li><a href="#noticia1">Empreendimento</a></li>
    <li><a href="#noticia2">Detalhes</a></li>
    <li><a href="#noticia3">Fotos</a></li>
    <li><a href="#noticia4">Localização</a></li>
</ul>

<div id="noticia"></div>

<div id="conteudo">

<div id="noticia1">
    <h2>Título</h2>
    <p>info</p>
</div>

<div id="noticia2">
    <h2>Título</h2>
    <p>info</p>
</div>

<div id="noticia3">
    <h2>Título</h2>
    <p>info</p>
</div>

</div>

<script type="text/javascript">
$(function(){
    $('#conteudo').hide();
    var noticia;    
    var hash = window.location.hash;
    if (hash !='')
    {
        noticia = $(hash).html();
        $('.abas li a[href="' + hash + '"]').parent().addClass('ativo');        
    } else {
        noticia = $('#conteudo div:first-child').html();            
        $('.abas li:first-child').addClass('ativo');        
    }
    $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
    $('.abas li a').click(function(){
        $('.abas li').removeClass('ativo');
        $(this).parent().addClass('ativo');
        var ancora = $(this).attr('href');
        var nome = ancora.substr(1, ancora.length);
        noticia = $('#conteudo div[id="' + nome + '"]').html();
        $('#noticia').empty();
        $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
    return false();
    })
})
</script>

My contents are getting off the flaps... CSS:

ul{list-style:none; padding-left:10px;}

.abas li{float:left; border:1px solid #ccc; border-bottom:0; margin-right:10px; padding:10px; border-top-left-radius:5px; border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-radius-topleft:5px; -webkit-border-radius-topright:5px; }

.abas li:hover{box-shadow:0 -2px 3px #DFDFDF; -moz-box-shadow:0 -2px 3px #DFDFDF; -webkit-box-shadow:0 -2px 3px #DFDFDF; font-weight:bold; border-color:#c0c0c0;}

.ativo{background:#ccc; border-color:#333;}

.ativo a{color:#fff; font-weight:bold; text-shadow:0 0 5px #999;}

#noticia{position:relative; width:880px; height:auto; padding:10px; clear:both; border:1px solid #ccc; -moz-box-shadow:0 -1px 3px #ccc;}

#noticia div{display:none;}

.credito{font-size:1.1em; position:absolute; right:0; bottom:-40px; margin-top:15px;}

.credito a{font-size:1.1em;}

PRINT

javascript html css

  • I think it has to do with margin:5px 0 0 -470px

  • Put a print of the problem on the page, it is better to understand

1 answer

2

You’re probably not loading jQuery to that page.

The problem I see is that false() is not a function, that is, it does not have the parentheses. Remove them from your return.

Of return false(); for return false;

I tested your code here, and apparently it’s working. See your code working below:

$(function() {
  $('#conteudo').hide();
  var noticia;
  var hash = window.location.hash;
  if (hash != '') {
    noticia = $(hash).html();
    $('.abas li a[href="' + hash + '"]').parent().addClass('ativo');
  } else {
    noticia = $('#conteudo div:first-child').html();
    $('.abas li:first-child').addClass('ativo');
  }
  $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
  $('.abas li a').click(function() {
    $('.abas li').removeClass('ativo');
    $(this).parent().addClass('ativo');
    var ancora = $(this).attr('href');
    var nome = ancora.substr(1, ancora.length);
    noticia = $('#conteudo div[id="' + nome + '"]').html();
    $('#noticia').empty();
    $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
    return false;
  })
})
ul {
  list-style: none;
  padding-left: 10px;
}
.abas li {
  float: left;
  border: 1px solid #ccc;
  border-bottom: 0;
  margin-right: 10px;
  padding: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-radius-topleft: 5px;
  -webkit-border-radius-topright: 5px;
}
.abas li:hover {
  box-shadow: 0 -2px 3px #DFDFDF;
  -moz-box-shadow: 0 -2px 3px #DFDFDF;
  -webkit-box-shadow: 0 -2px 3px #DFDFDF;
  font-weight: bold;
  border-color: #c0c0c0;
}
.ativo {
  background: #ccc;
  border-color: #333;
}
.ativo a {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px #999;
}
#noticia {
  position: relative;
  width: 880px;
  height: auto;
  padding: 10px;
  clear: both;
  border: 1px solid #ccc;
  -moz-box-shadow: 0 -1px 3px #ccc;
}
#noticia div {
  display: none;
}
.credito {
  font-size: 1.1em;
  position: absolute;
  right: 0;
  bottom: -40px;
  margin-top: 15px;
}
.credito a {
  font-size: 1.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="abas">
  <li><a href="#noticia1">Empreendimento</a>
  </li>
  <li><a href="#noticia2">Detalhes</a>
  </li>
  <li><a href="#noticia3">Fotos</a>
  </li>
  <li><a href="#noticia4">Localização</a>
  </li>
</ul>

<div id="noticia"></div>

<div id="conteudo">

  <div id="noticia1">
    <h2>Empreendimento</h2>
    <p>info</p>
  </div>

  <div id="noticia2">
    <h2>Detalhes</h2>
    <p>info</p>
  </div>

  <div id="noticia3">
    <h2>Fotos</h2>
    <p>info</p>
  </div>
  <div id="noticia4">
    <h2>Localização</h2>
    <p>info</p>
  </div>

</div>

See now an example without jQuery loaded, and see if it matches your model:

$(function() {
  $('#conteudo').hide();
  var noticia;
  var hash = window.location.hash;
  if (hash != '') {
    noticia = $(hash).html();
    $('.abas li a[href="' + hash + '"]').parent().addClass('ativo');
  } else {
    noticia = $('#conteudo div:first-child').html();
    $('.abas li:first-child').addClass('ativo');
  }
  $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
  $('.abas li a').click(function() {
    $('.abas li').removeClass('ativo');
    $(this).parent().addClass('ativo');
    var ancora = $(this).attr('href');
    var nome = ancora.substr(1, ancora.length);
    noticia = $('#conteudo div[id="' + nome + '"]').html();
    $('#noticia').empty();
    $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
    return false;
  })
})
ul {
  list-style: none;
  padding-left: 10px;
}
.abas li {
  float: left;
  border: 1px solid #ccc;
  border-bottom: 0;
  margin-right: 10px;
  padding: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-radius-topleft: 5px;
  -webkit-border-radius-topright: 5px;
}
.abas li:hover {
  box-shadow: 0 -2px 3px #DFDFDF;
  -moz-box-shadow: 0 -2px 3px #DFDFDF;
  -webkit-box-shadow: 0 -2px 3px #DFDFDF;
  font-weight: bold;
  border-color: #c0c0c0;
}
.ativo {
  background: #ccc;
  border-color: #333;
}
.ativo a {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px #999;
}
#noticia {
  position: relative;
  width: 880px;
  height: auto;
  padding: 10px;
  clear: both;
  border: 1px solid #ccc;
  -moz-box-shadow: 0 -1px 3px #ccc;
}
#noticia div {
  display: none;
}
.credito {
  font-size: 1.1em;
  position: absolute;
  right: 0;
  bottom: -40px;
  margin-top: 15px;
}
.credito a {
  font-size: 1.1em;
}
<ul class="abas">
  <li><a href="#noticia1">Empreendimento</a>
  </li>
  <li><a href="#noticia2">Detalhes</a>
  </li>
  <li><a href="#noticia3">Fotos</a>
  </li>
  <li><a href="#noticia4">Localização</a>
  </li>
</ul>

<div id="noticia"></div>

<div id="conteudo">

  <div id="noticia1">
    <h2>Empreendimento</h2>
    <p>info</p>
  </div>

  <div id="noticia2">
    <h2>Detalhes</h2>
    <p>info</p>
  </div>

  <div id="noticia3">
    <h2>Fotos</h2>
    <p>info</p>
  </div>
  <div id="noticia4">
    <h2>Localização</h2>
    <p>info</p>
  </div>

</div>

Functional example in Jsfiddle.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.