Question

我已将其实现到使用此CSS的jquery弹出框中：

#element_to_pop_up { 
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:700px;
    min-height: 500px;
}

见这里：http://www.pazzle.co.uk/index.php?main_page=product_info&cPath=6_11&products_id=8#.UIpb2cWlUYM

在ADD TO CART按钮下方显示“查看尺寸表”。点击它，你可以看到它有点扭曲，CSS与JSfiddle完全相同？

也许是因为它出现在popout脚本中？

编辑：

<!-- Element to pop up -->
<div id="element_to_pop_up">
<script language="javascript">
$(document).ready(function() {    

$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();

$('#tabs li a').click(function(){
    var t = $(this).attr('id');
  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'+ t + 'C').fadeIn('slow');
 }
});

});
</script>
    <a class="bClose">x<a/>

<ul id="tabs">

      <li><a id="tab1">test1</a></li>
      <li><a id="tab2">test2</a></li>
      <li><a id="tab3">test3</a></li>
      <li><a id="tab4">test4</a></li>
</ul>
          <div class="container" id="tab1C">1Some content</div>
          <div class="container" id="tab2C">2Some content</div>
          <div class="container" id="tab3C">3Some content</div>
          <div class="container" id="tab4C">4Some content</div>
</div>

Answer 1

我非常有信心您在jsfiddle中使用的Javascript与您在网站上使用的Javascript不同。

我在第一个li中看到了一个额外的锚标记。

<ul id="tabs"><a>

      </a><li><a></a><a id="tab1" class="inactive">test1</a></li>
      <li><a id="tab2" class="inactive">test2</a></li>
      <li><a id="tab3" class="inactive">test3</a></li>
      <li><a id="tab4" class="inactive">test4</a></li>

</ul>

你也看到了“不活动”。 class适用于所有li，而不应根据您的代码应用于第一个元素。所以当你的javascript运行时，这个锚标记肯定存在。

Answer 2

<a> <li>的{{1}}内有ul#tabs个标记，第一个<a>推送第二个<a>。

Jquery选项卡内容（显示问题）

2 个答案: