Question

我有一个jQuery选项卡部分 - 我想为其中的面板设置动画。下面是代码。我基本上希望将“vertical-tabstrip-visible-content”设置为一个滑动面板 - 这样当每个链接被点击时，它将关闭现有的面板并将正确的，相应的一个滑动到视图中。

如何使用jQuery实现这一目标？（我已经使用jQuery UI选项卡来制作标签效果）。

   <div id="tabstrip" class="vertical-tabstrip" >
    <ul class="vertical-tabstrip-tabs">
        <li><a href="#vid-1">Tab 1</a></li>
        <li><a href="#vid-2">Tab 2</a></li>
        <li><a href="#vid-3">Tab 3</a></li>                                         
    </ul>
    <div class="vertical-tabstrip-visible-content-container" id="vid-1"><div class="vertical-tabstrip-visible-content">Content 1</div></div>
    <div class="vertical-tabstrip-visible-content-container" id="vid-2"><div class="vertical-tabstrip-visible-content">Content 2</div></div>
    <div class="vertical-tabstrip-visible-content-container" id="vid-3"><div class="vertical-tabstrip-visible-content">Content 3</div></div>                    
</div>

/**********************************************************
 jQUERY UI TABSTRIP
***********************************************************/

.ui-tabs .ui-tabs-hide {
     display: none;
}

.ui-tabs a {

}
.ui-tabs-selected a {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    background: url('../../images/demo-config-on.gif') no-repeat right 50% #f8a230;
    padding-right:18px;     color:#fff;     margin-right:-10px;     margin-bottom: 0px;
}

/**********************************************************
 HORIZONTAL TABSTRIP
***********************************************************/

.vertical-tabstrip {
    margin: 0px;
    padding: 0px;
}

.vertical-tabstrip-tabs {
    float: left;
    width: 260px;   
    margin: 0px;
    background: #000;
}

.vertical-tabstrip-tabs li {
    text-align: left;
    list-style: none;
    font-size: 11px;
    padding: 0 0 0 10px;
    margin: 3px 0;
}
.vertical-tabstrip-tabs li a:link,
.vertical-tabstrip-tabs li a:visited {
    display:block; padding:1px 8px 4px;
}

* html .vertical-tabstrip-tabs li a:link,
* html .vertical-tabstrip-tabs li a:visited {
     padding:1px 8px 2px;
}

.vertical-tabstrip-tabs li a:hover,
.vertical-tabstrip-tabs li a:active {
    background-color:#f8a230
}

.vertical-tabstrip-visible-content-container {
    padding: 3px 0 0 10px;
    display: table-cell;
    height: 100%;
}
.vertical-tabstrip-visible-content {
    display: table-cell;
    padding: 0px 0px 15px;
    background: #aaa;
}

Answer 1

解决方案是在jquery中使用fx：特性。

 $('#tabstrip').tabs({ fx: { width: 'show', duration: 'slow'} });

尽管如此，我对通过此功能传递的内容感到非常困惑。如果有人有想法，我很想知道！

Answer 2

你看过LocalScroll插件了吗？

带有动画的jQuery选项卡

2 个答案: