我在点击链接时使用以下代码隐藏/显示div。代码似乎正在工作,因为它显示一个div并隐藏其他div,但div中的元素只显示在我点击Inspect Element之后,这是一个非常奇怪的bug,有什么建议吗?
HTML
<a href="javascript:void(0)" class="showinstagram" name="electronics"> Show Me </a>
<a href="javascript:void(0)" class="showinstagram" name="antiques"> Show Me </a>
<a href="javascript:void(0)" class="showinstagram" name="jewelry"> Show Me </a>
<a href="javascript:void(0)" class="showinstagram" name="random"> Show Me </a>
<div style="display:none" class="instagram" id="electronics">
[instashow source="@username" gutter="4" drag_control="false" free_mode="true" scrollbar="false" speed="0" easing="linear" auto_hover_pause="false" popup_deep_linking="true" popup_info="username instagramLink likesCounter commentsCounter description" analytics="false"]
</div>
<div style="display:none" class="instagram" id="antiques">
[instashow source="@username" gutter="4" drag_control="false" free_mode="true" scrollbar="false" speed="0" easing="linear" auto_hover_pause="false" popup_deep_linking="true" popup_info="username instagramLink likesCounter commentsCounter description" analytics="false"]
</div>
<div style="display:none" class="instagram" id="jewelry">
[instashow source="@username" gutter="4" drag_control="false" free_mode="true" scrollbar="false" speed="0" easing="linear" auto_hover_pause="false" popup_deep_linking="true" popup_info="username instagramLink likesCounter commentsCounter description" analytics="false"]
</div>
<div style="display:none" class="instagram" id="random">
[instashow source="@username" gutter="4" drag_control="false" free_mode="true" scrollbar="false" speed="0" easing="linear" auto_hover_pause="false" popup_deep_linking="true" popup_info="username instagramLink likesCounter commentsCounter description" analytics="false"]
</div>
的Javascript
<script>
jQuery(document).ready(function($){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show().siblings().hide();
});
});
</script>
编辑* :我还注意到,如果我调整屏幕大小,div中的内容也会加载。