1

本周 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经验的人可以帮助我！

4

1 回答 1

1

更改您的处理程序添加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:”

或者用say span替换一个标签，让你的点击处理程序保持不变。

<a name='project_1'></a>或者在标签（

于 2013-03-16T19:48:22.550 回答