[英]How do I make a javascript div open on load but hide when clicking on another div link?
[英]How do I open javascript div tabs with a link on the page
我正在尝试使用链接来打开使用div创建的特定标签,然后使用javascript打开和关闭标签。
这是选项卡,并且javascript在底部的script标记内:
<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>
救命。 我的脑袋疼...
您只需要设置链接,这样就不会将用户带到新页面,然后设置单击事件以打开选项卡。 例:
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.