将jQuery应用于控制div'；s css高度新手jQuery

现在，我为每个导航链接提供了一个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属性造成了所有的问题。这里是你需要做的

将所有Jquery替换为：

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

并在CSS remove for

#classpanes div

中删除

位置：绝对和您都设置好了

这里有一个
我建议您查看jQuery animate函数，让幻灯片和淡入淡出同时工作。使用jquery工具执行此操作的最佳方法是使用
$.tools.tabs.addEffect
定义自己的效果。我还将类窗格css更改为
height:auto
。我这里有一个工作示例：

非常感谢您抽出时间！是的，jQuery工具标签插件需要绝对位置，但显然在这种情况下单独使用jQuery更有意义。那么，有没有办法将动画/幻灯片添加到
$（“#classpanes”）.css（“高度”、“自动”）？这就是我真正想要的。我注意到的另一个问题是快门/闪烁，看起来正在调用的div正在当前div的顶部堆叠，然后消失。正如我在我的作品中所说，我完全愿意放弃淡入淡出，使过渡更平滑，并希望动画化。再次感谢你的帮助。
<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>

#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;
}

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