Javascript 嵌套选项卡中的内容未显示100%全宽

我设置了嵌套的选项卡，但第二组选项卡（

#tab-2-1

，

#tab-2-2

，

#tab-2-3

）中的内容没有完全伸展到100%的宽度。我错过了什么吗

HTML

JS

在CSS中：

.videogallery .sliderMain {
    width: 100%!important;
}

.videogallery.sliderMain

被赋予了一种宽度为100px的内联样式

从[videogallery]短代码（WordPress插件可能？）创建标记的是100px的宽度。你可以在你的CSS中覆盖这一点（使用上面的内容），或者你可以通过深入研究videogallery插件的JS/CSS来进一步研究它是如何计算100px的

---

希望这能有所帮助。

我没有看到那些显示为选项卡的内容，您是否包含了所有CSS？对我来说，它们显示为100%宽度，但不是选项卡我已经添加了这个JS提琴，它似乎工作得很好。@JDVangsness我为你们提供了一个实时链接，以防有帮助。我不知道为什么它们没有显示为标签。@EternalHour我为您提供了一个实时链接。我正要发布这个确切的答案，然后看到了您的答案。这应该可以。我把它放进去了，但它只让视频100%宽。下面的缩略图导航仍停留在100px。我尝试添加`.main导航{width:100%！important}，但没有任何变化。有趣的是，当我激活开发人员控制台（F12）并关闭它时，宽度变为100%。有什么想法吗？插件和/或JS将100px的宽度添加到中。sliderMain也将100px的宽度添加到中，然后计算拇指的内部宽度为40px，因此用CSS克服这一切是徒劳的。最好看看插件，看看它是如何得到这个值的。如果你想知道我的猜测，那是因为创建视频库和旋转木马的JS在加载视频之前就已经运行了，所以div的宽度会很小，这听起来似乎是一个合理的解释。我已经联系了插件的创建者，希望他能回复我。奇怪的是，当我将视频库放入常规选项卡（而不是嵌套选项卡）时，它工作正常。

.tab_content { 
  background:#000;
  color:#fff;
  max-width:500px;
  padding:10px 
}
.tabs li { 
  display:inline;
  list-style:none 
}
.tabs a { 
  background:#7c7c7c;
  border-radius:5px 5px 0 0;
  color:#dadada;
  display:inline-block;
  font-size:2em;
  padding:10px 15px 8px;
  text-decoration:none 
}
.tabs a.active { 
  background:#e32d2d;
  color:#fff 
}
#tab2 ul.tabs a { 
  background:transparent;
  color:#999;
  padding:10px 10px 0 10px 
}
#tab2 ul.tabs a.active { 
  color:#fff 
}

jQuery('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = jQuery(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = jQuery($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
        jQuery(this.hash).hide();
    });

    // Bind the click event handler
    jQuery(this).on('click', 'a', function(e){
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.hide();

        // Update the variables with the new link and content
        $active = jQuery(this);
        $content = jQuery(this.hash);

        // Make the tab active.
        $active.addClass('active');
        $content.show();

        // Prevent the anchor's default click action
        e.preventDefault();
    });
});

.videogallery .sliderMain {
    width: 100%!important;
}