html - 将所有面板的宽度设置为最宽面板的宽度

Question

我有 jquery 选项卡，我想让所有面板的宽度都与最宽的面板宽度相同。heightStyle:"auto" 之类的东西适用于高度。widthStyle:"auto" 将是我正在寻找的内容，但它不存在。

它的外观与我希望它的外观的比较:

<div id="tabs" class="tab" >
  <ul>
    <li><a href="#f1"><span>One</span></a></li>
    <li><a href="#f2"><span>Two</span></a></li>
    <li><a href="#f3"><span>Three</span></a></li>
  </ul>
  <div id="f1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div id="f2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="f3">c<br>c<br>c<br>c<br>c<br>c<br></div>
</div>
<div style="clear:both">
</div>
<div id="tabs2" class="tab" >
  <ul>
    <li><a href="#f1"><span>One</span></a></li>
    <li><a href="#f2"><span>Two</span></a></li>
    <li><a href="#f3"><span>Three</span></a></li>
  </ul>
  <div id="f1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div id="f2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="f3">c<br>c<br>c<br>c<br>c<br>c<br></div>
</div>
<script>
$("#tabs").tabs({
            heightStyle: "auto",
        }).css("float", "left");

$("#tabs2").tabs({
            heightStyle: "auto",
        }).css("float", "left").width(485);
</script>

http://jsfiddle.net/knj73r9o/2/

我想在不对宽度进行硬编码的情况下执行此操作，而是自动使用内容宽度。这样的事情可能吗？

Answer 1

为了解决这个问题，您需要迭代每个面板并确定最大宽度值。由于宽度已折叠，您还必须激活每个面板。这样的事情会有所帮助:

示例:https://jsfiddle.net/Twisty/knj73r9o/24/

JavaScript

$(function() {
  function findMaxWidth($tab) {
    var mw = 0;
    var oInd = $tab.tabs("option", "active");
    $tab.find(".ui-tabs-panel").each(function(ind, el) {
      $tab.tabs("option", "activate", ind);
      console.log("Activate Tab " + ind);
      if ($(el).width() > mw) {
        mw = $(this).width();
        console.log("Tab " + ind + " Width: " + mw + "px");
      }
    });
    $tab.tabs("option", "active", oInd);
    return mw;
  }

  $("#tabs").tabs({
    heightStyle: "auto",
  }).css("float", "left");

  var widthStyle = findMaxWidth($("#tabs"));
  $("#tabs div").each(function() {
    $(this).css("width", widthStyle + "px");
  });

  $("#tabs2").tabs({
    heightStyle: "auto",
  }).css("float", "left").width(485);
});

一旦有了宽度，就可以使用 .css() 来设置每个宽度。

如果您经常需要这样做，或者在很多元素上这样做，请考虑使用 $.widget() 来设置您自己的 widthStyle 选项或函数。

希望对您有所帮助。