0

css と javascript を使用してタブ スタイル インターフェイスを作成しましたが、2 つのタブのみが正常に動作しています。しかし、さらにタブを追加したいのですが、現在アクティブなタブとその内容を表示するための 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();
        }

    });

});

これは 2 つのタブで正常に機能していますが、さらにタブを追加すると、次のようになります。

<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のIDとクラスについても読んでください

于 2012-04-11T06:44:17.017 に答える
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 に答える
0

1 つのタブを開く前にコンテンツ 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 に答える