Question

我使用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函数中进行哪些更改..

Answer 1

我建议如下：

$(".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 Fiddle demo

或以下（相当于上述内容，但使用回调）：

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

    });

JS Fiddle demo

这假设如下：

您要展示的所有“框”都具有contentBox，
您要显示的“框”的ID采用点击链接的id后跟单词“框”的形式，因此点击#signup链接会显示{{ 1}}。

已编辑以包含仅限CSS的选项：

使用以下HTML：

#signupbox

CSS：

<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>

JS Fiddle demo

Answer 2

你混合id s（必须是唯一的 - 你多次使用它们）和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
    });
});

参见 a working fiddle

另请阅读MDN上的 ids 和 classes

Answer 3

如果在打开一个标签之前给内容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();

  });

我没有测试过这个，但希望你能得到这个想法。

Answer 4

未经测试但可能有效：

<强>使用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>

使用javascript的标签样式

4 个答案: