0

我已经使用 css 和 javascript 创建了选项卡样式界面，只有两个选项卡工作正常。但是我想向它添加更多选项卡，但我不知道如何为它编写 javascript 代码以显示当前活动选项卡及其内容和隐藏所有其他选项卡及其内容

以下是我的 html 代码：

<div id="container">

    <div id="tabbox">
        <a href="#" id="signup" class="tab signup">Signup</a>
        <a href="#" id="login" class="tab select">Login</a&gt;
    </div>

    <div id="panel">
        <div id="loginbox">Login Form</div>
        <div id="signupbox"&gt;Signup Form</div>
    </div>

</div>

这是我的 javascript 代码：

$(document).ready(function()
{

    $(".tab").click(function()
    {
        var X=$(this).attr('id');

        if(X=='signup')
        {
            $("#login").removeClass('select');
            $("#signup").addClass('select');
            $("#loginbox").slideUp();
            $("#signupbox").slideDown();
        }
        else
        {
            $("#signup").removeClass('select');
            $("#login").addClass('select');
            $("#signupbox").slideUp();
            $("#loginbox").slideDown();
        }

    });

});

这对于两个选项卡都可以正常工作，但是如果我向其中添加更多选项卡，请说：

<div id="container">

      <div id="tabbox">
          <a href="#" id="signup" class="tab signup">Signup</a>
          <a href="#" id="login" class="tab select">Login</a&gt;
          <a href="#" id="basic" class="tab basicinfo">Basicinfo</a>
          <a href="#" id="contact" class="tab contact info">contactinfo</a>
      </div>

      <div id="panel">
          <div id="loginbox">Login Form</div>
          <div id="signupbox"&gt;Signup Form</div>
          <div id="basicbox">Basic information</div>
          <div id="contactbox">Contact information</div>
      </div>

</div>

然后，如果我使用以前的 javascript 函数，我将不得不向它添加更多行，并且我不知道如何以简洁的方式做到这一点。我必须在我的 javascript 函数中进行哪些更改..

4

4 回答 4

2

我建议如下：

$(".tab").click(function()
    {
        var x = this.id, // equivalent to $(this).attr('id'), but slightly faster/more-simple
            show = $('#' + x + 'box');
        if (show.length){
            $('.contentBox').slideUp(500);
            show.slideDown(500);
        }

    });​

JS 小提琴演示。

或以下（等同于上述，但使用回调）：

$(".tab").click(function()
    {
        var x = this.id,
            show = $('#' + x + 'box');
        if (show.length){
            $('.contentBox')
                .slideUp(500,
                         function(){
                             show.slideDown(500);
                         });
        }

    });​

JS 小提琴演示。

这假设如下：

  1. 您要显示的所有“盒子”都具有contentBox,
  2. 您要显示的“框”的 id 采用id单击链接的形式，后跟“框”一词，因此单击#signup链接会显示#signupbox。

编辑以包含仅 CSS 选项：

使用以下 HTML：

<div id="container">

    <div id="tabbox">
        <a href="#signupbox" id="signup" class="tab signup">Signup</a> <!-- note the href -->
        <a href="#loginbox" id="login" class="tab select">Login</a>
    </div>

    <div id="panel">
        <div id="loginbox" class="contentBox">Login Form</div>
        <div id="signupbox" class="contentBox">Signup Form</div>
    </div>

</div>​

和CSS：

.contentBox {
    height: 0;
    -webkit-transition: height 1s linear;
    -moz-transition: height 1s linear;
    -o-transition: height 1s linear;
    -ms-transition: height 1s linear;
    transition: height 1s linear;
    overflow: hidden;
}

.contentBox:target {
    height: 2em;
    -webkit-transition: height 1s linear;
    -moz-transition: height 1s linear;
    -o-transition: height 1s linear;
    -ms-transition: height 1s linear;
    transition: height 1s linear;
}​

JS 小提琴演示。

于 2012-04-11T06:38:04.587 回答
1

您正在混合ids （必须是唯一的 - 您多次使用它们）并且classes以一种奇怪的方式（您在编辑之前做了......）。

对于基本设置，例如：

<div id="container">

      <div id="tabbox">
          <a href="#A" class="tab">A</a> <!-- note the URL fragments pointing to actual ids -->
          <a href="#B" class="tab">B</a>
          <a href="#C" class="tab">C</a>
          <a href="#D" class="tab">D</a>
      </div>

      <div id="panel">
          <div id="A" class="tab">A Content</div> <!-- ID attributes are only used once -->
          <div id="B" class="tab">B Content</div>
          <div id="C" class="tab">C Content</div>
          <div id="D" class="tab">D Content</div>
      </div>

</div>​​​​​​​​​​​​​​​​

你可以只使用几行 jQuery 来让事情正常工作：

$('div.tab').hide().first().slideDown(); //show first

$('a.tab').click(function(){
    var targetID = $(this).attr('href'); //store element that triggered the click event
    $('div.tab:visible').slideUp(function(){ //hide visible tab
        $(targetID).slideDown(); //slide down newly selected tab
    });
});​

看到一个工作小提琴

还可以阅读MDN 上的ids和classes

于 2012-04-11T06:44:17.017 回答
0

如果您在打开一个选项卡之前给内容 div 上课，您可以关闭所有其他选项卡，例如

$(".tab-content").slideUp();
$("#loginbox").slideDown();

您还需要知道您单击了哪个选项卡，例如

$(".tab").click(function(){
   var id = this.id;
   var current_tab_content = '#'+id+'box';

   $(".tab-content").slideUp();
   $(current_tab_content).slideDown();

  });

我没有对此进行测试，但希望你能明白这一点。

于 2012-04-11T06:38:11.893 回答
0

未经测试，但可能有效：

Javascript：

$(document).ready(function(event) {

    $("#tabbox a:not(.selected)").click(function() {
        $($("#tabbox a.selected").attr('href')).slideUp();
        $("#tabbox a.selected").removeClass('select');
        $(this).addClass('select');
        $($(this).attr('href')).slideDown();
        event.stopPropagation();
    });

});

HTML：

<div id="container">

    <div id="tabbox">
        <a href="#signupbox" id="signup" class="tab signup">Signup</a>
        <a href="#loginbox" id="login" class="tab select">Login</a>
    </div>

    <div id="panel">
        <div id="loginbox">Login Form</div>
        <div id="signupbox">Signup Form</div>
    </div>

</div>
于 2012-04-11T06:47:23.507 回答