You're probably not loading jQuery into this page.
The problem I see is that false()
is not a function, ie it does not have the parentheses. Remove them from your return
.
From return false();
to return false;
I tested your code here, and it's apparently working. See your working code 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><ulclass="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>
Now look at an example with no jQuery loaded, and see if it's the same as 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 sample in JSFiddle.