jquery - 应用jQuery控制div的css高度 jQuery新手

Question

Example here

现在，我为每个导航链接提供了一个 jQuery 函数，用于将每个相应 div 的高度更改为特定的 px 值，如下所示:

<script type="text/javascript">
    $(".class1").click(function() {
        $("#classpanes").css("height","300px");
    });

    $(".class2").click(function() {
        $("#classpanes").css("height","550px");
    });

    $(".class3").click(function() {
        $("#classpanes").css("height","200px");
    });
</script>

(这会更改 CSS 中设置的 300px 初始高度)

我知道这是一个糟糕的解决方案。另外它看起来很粗糙，主要是因为我也使用了 jQuery Tools Tabs 插件来淡化 div:

<script type="text/javascript">
$(function() {
    $("#class ul").tabs("#classpanes > div", {effect: 'fade', fadeOutSpeed: 200});
});
</script>

所以我想应用 jQuery 动画的滑动功能(？)在加载每个 div 时将 div 滑动到正确的高度。如果能够以某种方式检测 div 的高度，而不是手动输入它，那就太好了。

剩下的一个问题是侧面导航链接可以调整大小，但该函数不会拾取其中一个 div 内的链接(正如您在示例中可以看出的那样)。

如果淡入淡出和滑动出现问题，我完全愿意放弃淡入淡出。

预先感谢任何提供意见的人!

相关 HTML

<div id="class">
    <div id="classnav">
        <ul>
            <li><a href="#1" class="class1">Introductory Classes</a></li>
            <li><a href="#2" class="class2">Private Lessons</a></li>
            <li><a href="#3" class="class3">Duet Lessons</a></li>
        </ul>
    </div>    
    <div id="classpanes">
        <div><p>Lorem ipsum</p></div>
        <div><p>Lorem ipsum</p></div>
        <div><p>Lorem ipsum</p></div>
    </div>
</div>

相关CSS

#class{
    position: relative;
}

#classnav {
    width: 175px;
    float: left;
}

#classpanes {
    position: relative;
    width: 720px;
    float: left;
    margin-top: -4px;
    overflow: visible;
    height: 300px;
}

#classpanes div {
    display:none;
    position:absolute;
}

Answer 1

花了大约一个小时，最后，这只是一个 css 属性造成了所有问题。这是您需要做的；

将所有 Jquery 替换为:

$(function() {
        $("#class ul").tabs("#classpanes > div", {effect: 'fade', fadeOutSpeed: 200});
        $("#classpanes").css("height","auto");
    });

并在 CSS 中删除 #classpanes div 删除 position:absolute; ，一切就完成了。

这是一个DEMO