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经验的人可以对我有所帮助!

最佳答案

更改您的处理程序并添加preventDefault

    $(".project").click(function(e) {
        e.preventDefault();
        $("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;
    });


或将您的a标记href属性更改为类似于“ javascript:”

或将标签替换为“ span”,让您的点击处理程序保持不变。

或在滚动到该标签或页面开始处的正确位置添加名称属性(<a name='project_1'></a>),因为没有对应名称的ancor

10-05 20:41
查看更多