0

タブの作成にJQueryを使用するのが好きです。私の問題は、すべてのjqueryタブ定義がこの設計に従っていることです。

<div>  
<h4>Heading</h4>  
  <div>  
    <ul>  
     <li><a>Tab 1</a></li>  
     <li><a>Tab 2</a></li>  
     <li><a>Tab 3</a></li>  
    </ul>  
     <div>Content for Tab 1</div>  
     <div>Content for Tab 2</div>  
     <div>Content for Tab 3</div>  
  </div>  
</div>

ただし、次のようなデザインが必要です。

<div>  
  <h4>Heading</h4>  
  <div>  

    <div><a>Tab 1</a></div>
    <div>Content for Tab 1</div>  

    <div><a>Tab 2</a></div>  
    <div>Content for Tab 2</div>  

    <div><a>Tab 3</a></div>  
    <div>Content for Tab 3</div>  

  </div>  
</div>

上記の設計は可能ですか？

また、タブはIDではなくcssクラスによって認識される必要があります（コードを介して動的にタブを作成するため）。これも可能ですか？

更新：私を助けてくれたすべての素晴らしい心に感謝します、私は私が望んでいたものを確立することができます。以下の投稿からの入力を使用して、ページに複数のタブを配置するためにそれらを改善しました。

ここでデモを見つけてください：http： //jsfiddle.net/sunalive/VHPwP/12/

4

3 に答える 3

1

いくつかのクラスを追加します:-)

<div>  
  <h4>Heading</h4>  
  <div class="parent">  

    <div class="link"><a>Tab 1</a></div>
    <div class="content">Content for Tab 1</div>  

    <div class="link"><a>Tab 2</a></div>  
    <div class="content">Content for Tab 2</div>  

    <div class="link"><a>Tab 3</a></div>  
    <div class="content">Content for Tab 3</div>  

  </div>  
</div>  



$('.link').click(function() {
    $(this).parent().find('.content').hide();
    $(this).next().show();
});

or

$('.link').click(function() {
    $(this).parent().find('.content').hide().end().next().show();
});
于 2012-06-20T06:36:34.203 に答える
1

ここでの作業例を参照してください。

http://jsfiddle.net/rathoreahsan/q7Lqq/

HTMLコード：

    <div class="contents-wrapper">  
          <h4>Heading</h4>  
          <div class="tabs-container">  

              <div class="tabs"><a>Tab 1</a></div>
              <div class="contents" style="display:block">Content for Tab 1</div>  

              <div class="tabs"><a>Tab 2</a></div>  
              <div class="contents">Content for Tab 2</div>  

              <div class="tabs"><a>Tab 3</a></div>  
              <div class="contents">Content for Tab 3</div>  

          </div>  
    </div>

JQUERY

    $('.tabs').click(function(){
        $(this).parent().find('.contents').hide();
        $(this).next().show();
    });

CSS 

    .contents-wrapper{
        width: 222px;
        font-family: tahoma;
    }

    h4 {
       height: 40px;
       line-height: 40px;
       background: #666;
       color: #fff;
       font-size: 26px;
       padding: 0 15px;
    }

   .tabs-container { position: relative; }

   .tabs {
       float:left;
       background: #ccc;
       height: 30px;
       line-height: 30px;
       padding: 0 16px;
       border-right:1px solid #666;
       border-bottom:1px solid #666;
       cursor: pointer;
    }

    .tabs:hover { background: #f4f4f4; }

    .contents {
       position: absolute;
       margin-top: 31px;
       padding: 15px;
       border: 1px solid #ccc;
       width: 190px;
       font-size: 12px;
       font-weight:bold;
       display: none;
     }

お役に立てば幸いです。ありがとう！

于 2012-06-20T07:40:16.330 に答える
0

以下は、タブを動的に作成するためのリンクです。

http://blog.favrik.com/2009/08/11/dynamically-adding-jquery-tabs-round2/

http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx

于 2012-06-20T06:39:32.933 に答える