Question

现在我为每个导航链接都有一个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");
    });

在#classpanes div的CSS移除中移除position:absolute;，您就已经完成了设置。

这是DEMO

Answer 2

我建议你看一下jQuery animate函数，以便同时获得幻灯片和淡入淡出工作。使用jquery工具执行此操作的最佳方法是使用$.tools.tabs.addEffect定义自己的效果。我还将classpanes css更改为height: auto。我在这里有一个有效的例子：

http://jsfiddle.net/z6daP/13/

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

2 个答案: