使用jQuery选项卡显示隐藏其他内容

时间:2012-09-10 09:59:33

标签: javascript jquery tabs

我们在页面的中间栏中使用了五个标签,用于显示/隐藏内容。

在我们的右栏中,只有在选中标签1时才会显示内容(这是页面加载时的默认值,名为'#overview')。

如何确保在选择标签2,3,4或5时,此右侧div设置为display:none?不幸的是,我不能在标签1的内容中加入这个简单的解决方案 - 它必须显示在右栏中。

我要隐藏的课程为“kis-widget”(选择#overview时),我们的显示/隐藏代码为:

    $(document).ready(function()
    {
      if (window.location.hash)
      {
         show(window.location.hash);
      }
      else
      {
        show('#overview');
      }
    });

    function show(id)
    {
      $('#overview_div, #coursecontent_div, #profiles_div, #requirements_div, #fees_div').hide();
      $('#tabs li a').removeClass("selected");
      $(id + '_div').show();
      $(id + '_link').addClass("selected");
    }

感谢任何帮助。

由于

尼尔

1 个答案:

答案 0 :(得分:0)

  

如何选择标签2,3,4或5时,我该如何确保   右手div设置为display:none?

与此相符:

DOM:
   TAB 1 .tab .tab-first 
   TAB 2 .tab 
   TAB 3 .tab
   TAB 4 .tab
   TAB 5 .tab

以下代码:

function hiderighthanddiv(evt)
{
//whatever you want
}

function showrighthanddiv(evt)
{
//whatever you want
}

$('.tab').not('.tab-first').bind('click',hiderighthanddiv);

$('.tab-first').bind('click',showrighthanddiv);