Question

我有一个Tabbed区域的代码，但是当用户点击一个标签时，内容会突然显示并且新内容会淡入。我希望能够让内容淡出并进入。此外，标签本身也会消失活动和非活动状态，但我没有任何代码是这个默认行为踢？

$(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();

    $('div.tabs ul.tabNavigation a').click(function () {
     tabContainers.hide();
     tabContainers.filter(this.hash).fadeIn(2000);
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     $(this).addClass('selected');
     return false;
    }).filter(':first').click();
   });


<div class="tabs">

<ul class="tabNavigation">
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li id="more"><a href="http://www.google.com/">Link</a></li>
</ul>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

</div>

另外

我有标签，我不想标记框但是作为普通链接工作，我尝试添加ID然后说返回true，但是这不起作用，我该怎么做？感谢

修改

是否有可能根据哈希显示相关内容，如果有人来自外部网页，其网址为domain.com/#b，并显示ID为b的div？

Answer 1

试试这个：

http://jsbin.com/emici3/3/edit

回调被添加到fadeOut以触发淡入。

编辑：

添加了处理wish散列的部分，并选择了正确的选项卡。

Answer 2

试试这个

<script>
$(function () {
    var tabContainers = $('div.tabs .tabContent');
    tabContainers.hide().filter(':first').show();
    $('div.tabs ul.tabNavigation a.tab').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).fadeIn(2000);
        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
    if(window.location.hash){
        $('a[href='+window.location.hash+']').click();
    }
});
</script>

<div class="tabs">
    <ul class="tabNavigation">
        <li><a href="#a" class="tab">A</a></li>
        <li><a href="#b" class="tab">B</a></li>
        <li><a href="#c" class="tab">C</a></li>
        <li><a href="http://www.google.com/">Link</a></li>
    </ul>
    <div id="a" class="tabContent">AA</div>
    <div id="b" class="tabContent">BB</div>
    <div id="c" class="tabContent">CC</div>

</div>

jQuery选项卡区域

2 个答案: