Fatal编程技术网

使用javascript的选项卡样式

javascript jquery html tabs

使用javascript的选项卡样式,javascript,jquery,html,tabs,Javascript,Jquery,Html,Tabs,我已经使用css和javascript创建了选项卡样式界面，只有两个选项卡工作正常。但是我想添加更多选项卡，我不知道如何编写javascript代码来显示当前活动选项卡及其内容并隐藏所有其他选项卡及其内容 以下是我的html代码： <div id="container"> <div id="tabbox"> <a href="#" id="signup" class="tab signup">Signup</a>

我已经使用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>
这对于两个选项卡来说效果很好，但如果我添加更多选项卡，请说：

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


登录表单

我建议如下：


$(".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);
        }

    });​




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



这假设如下：


$(".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);
        }

    });​



  • 要显示的所有“框”都具有
    contentBox
    类
    • 

  • 要显示的“框”的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>​

    

    .
    我建议如下：
    

    $(".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);
        }

    });​

    

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

    
这假设如下：
    

    $(".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);
        }

    });​

    

  • 要显示的所有“框”都具有
    contentBox
    类
    • 

  • 要显示的“框”的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>​

    

    .
    如果在打开一个选项卡之前为内容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();

  });

    

    我没有对此进行测试，但希望您能理解。
    如果您在打开一个选项卡之前为内容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();

  });

    

    我没有测试过这一点，但希望您能理解。
    您将
    id
    s（必须是唯一的-您多次使用它们）和
    类以一种奇怪的方式混合在一起（您在编辑之前做过…）
    
对于基本设置，如：
    

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

    
请参见
    

    另外，请阅读MDN上的和您将
    id
    s（必须是唯一的-您多次使用它们）和
    类以一种奇怪的方式混合在一起（您在编辑之前做过…）
    
对于基本设置，如：
    

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

    
请参见
    

    还可以阅读有关MDN的和未测试但可能有效的内容：
    
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();
    });

});

    

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

    
HTML:
    

    $(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();
    });

});

    

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

    $(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();
    });

});

    

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

    
HTML:
    

    $(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();
    });

});

    

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

    

    
登录表单
报名表

    一个id应该是唯一的，你的html有3个相同id的元素。。。首先，这需要解决。Als，如果
    x
    是
    $（此）
    的id，为什么要使用
    $（'signup'）
    选择器？它再次扫描整个dom树。。。使用
    $（此）
    而不是id应该是唯一的，您的html有3个具有相同id的元素。。。首先，这需要解决。Als，如果
    x
    是
    $（此）
    的id，为什么要使用
    $（'signup'）
    选择器？它再次扫描整个dom树。。。使用
    $（this）
    代替标题我不相信
    $（this）.id将起作用。您需要对jQuery
    this
    对象使用jQuery方法：
    $（this.attr（'id'），或从jQuery对象转换为DOM对象：
    $（this）[0].id
    或者首先使用本机DOM：
    this.id
    我不相信
    $（this）.id将起作用。您需要对jQuery
    this
    对象使用jQuery方法：
    $（this.attr（'id'），或从jQuery对象转换为DOM对象：
    $（this）[0].id
    或者首先使用本机DOM：
    this.id谢谢这个解决方案..我尝试了这个，效果很好，但我接受m90给出的解决方案，因为他的解决方案提供了slideup和slidedown效果的平滑度，在你的解决方案中，感觉页面被卡住了几秒钟左右。我尝试了slideup和slidedown，使用不同的参数，如fast，100但是我仍然没有得到平滑的滑动效果。但是谢谢你的解决方案，不用担心；毕竟，你注定要接受你实际用来解决问题的最有用的答案。=）感谢这个解决方案。我尝试了这个方法，效果很好，但我接受了m90给出的解决方案，因为他的解决方案提供了slideup和slidedown效果的平滑度，在你的解决方案中，感觉页面被卡住了几秒钟左右。我尝试了slideup和slidedown，使用不同的参数，如fast，100但是我仍然没有得到平滑的滑动效果。但是谢谢你的解决方案，不用担心；毕竟，你注定要接受你实际用来解决问题的最有用的答案。=）