本周 jQuery 毁了我。我在我的投资组合网站 ( http://www.codeisdna.com ) 上通过 jQuery 使用 fadeIn 来打开一个部分,一旦它被点击。这是我正在使用的 HTML 代码:
<div class="project first project_name">
<div class="title">
Project Title!
<div class="date">2012</div>
</div>
<a class="expand" title="Click to expand the project." href="#project_1">Project Title!</a>
</div>
打开一个选项卡:
<div id="project_1" class="project_full pname"></div>
使用这个js:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
});
编辑:这是 .project_full 的 CSS 代码(扩展选项卡 - .project 的 CSS 代码无关):
.project_full {
display: none;
margin-top: 20px;
width: 100%;
max-height: 450px;
padding: 20px 0px;
text-align: center;
background: url(../img/code.jpg) top center no-repeat fixed #293134;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
color: #fff;
overflow: hidden;}
.project_full .wrapper {position: relative;}
我尝试为父 div 分配固定高度,e.PreventDefault() 不起作用(我正在使用基于锚的选项卡,因此这种类型的任何方法都不起作用)等等。页面在第一次点击和每次连续点击时跳转。我知道一旦 div 被取消隐藏和“重新隐藏”,它就会因为缺少内容而跳跃。
我想知道 HTML5 数据属性是否可以解决这个问题?但是话又说回来,为什么它作为锚仍然存在,尽管它是空白的(#)。
希望有更多JS经验的人可以帮助我!