0

リンクを使用して、div を使用して作成された特定のタブを開こうとしています。タブは JavaScript を使用して開閉します。

タブは次のとおりです。javascript は、下部のスクリプト タグ内にあります。

<div class="span12 module_cont module_tabs">      
        <div class="shortcode_tabs">
            <div class="all_heads_cont">
                <div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
                <div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
                <div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
                <div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
            </div>
            <div class="all_body_cont">
                <div class="shortcode_tab_item_body body1 it1">
                    <div class="ip">
                        %%Panel.ProductDescription%%
                    </div>
                </div>
                <div class="shortcode_tab_item_body body2 it2">
                    <div class="ip">
                        %%Panel.ProductReviews%%                               
                    </div>
                </div>
                <div class="shortcode_tab_item_body body3 it3">
                    <div class="ip">
                        %%Panel.ProductVideos%%                                           
                    </div>
                </div>
                <div class="shortcode_tab_item_body body4 it4">
                    <div class="ip">
                        %%Panel.SimilarProductsByTag%%
                        %%Panel.ProductByCategory%%
                        %%Panel.ProductVendorsOtherProducts%%
                        %%Panel.SimilarProductsByCustomerViews%%               
                    </div>
                </div>
            </div>
        </div><!-- .shortcode_tabs -->                             
        <script type="text/javascript">
            jQuery('.shortcode_tabs').each(function(index) {                                    
                /* GET ALL HEADERS */
                var i = 1;
                jQuery('.shortcode_tab_item_title').each(function(index) {
                    jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
                    jQuery(this).addClass('head'+i);
                    jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
                    i++;
                });
                /* GET ALL BODY */
                var i = 1;
                jQuery('.shortcode_tab_item_body').each(function(index) {
                    jQuery(this).addClass('body'+i);
                    jQuery(this).addClass('it'+i);
                    jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
                    i++;
                });
            });
            jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
            jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');

            jQuery('.shortcode_tab_item_title').live('click', function(){
                jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
                jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
                var whatopen = jQuery(this).attr('data-open');
                jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
                jQuery(this).addClass('active');
            });

            jQuery('reviews').live('click', function(){
                jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
                jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
                var whatopen = jQuery(this).attr('data-open');
                jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
                jQuery(this).addClass('active');
            });                                               
        </script>                                        
</div><!-- .module_cont -->

私がやりたいのは、同じページにレビュー タブ (id="reviews") をアクティブにするリンクを配置することだけで、これは body2 としても知られています。

これまでのところ、私のリンクは次のとおりです。

<a href="#reviews">Reviews</a>

ヘルプ。脳が痛い…

4

1 に答える 1

0

ユーザーが新しいページに移動しないようにリンクを設定し、クリックイベントを設定してタブを開くだけです。例：

HTML:

<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>

JavaScript:

$('#reviewLink').click(function() {
    $('.shortcode_tab_item_body').css({display:'none'});
    $('.body2').css({display:'none'});
});

またはここの jsfiddle: http://jsfiddle.net/tKLhn/

于 2013-06-20T00:33:08.580 に答える