javascript - 使用 jQuery 选项卡显示隐藏附加内容

Question

我们在页面的中心栏中使用五个选项卡，用于显示/隐藏内容。

在我们的右侧列中，只有在选择第一个选项卡时才应该出现一些内容（这是页面加载时的默认设置，名为“#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");
    }

将不胜感激任何帮助。

谢谢

尼尔

Answer 1

如何确保在选择选项卡 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);