jquery - jquery 选项卡中的按钮在所有选项卡中可见

Question

我试图在 jquery 选项卡中添加一个在所有选项卡中都可见的按钮，我更改了 jquery 选项卡的 css 以使边框对选项卡关闭，但按钮附近的边框丢失了。

HTML

<div id="tabs">
    <ul>
        <li> <a href="#tab-1">Tab 1</a></li>
        <li> <a href="#tab-2">Tab 2</a></li>
        <li> <a href="#tab-3">Tab 3</a></li>
        <li> <a href="#tab-4">Tab 4</a></li>
    </ul>
    <button style="margin: 1em 1.4em">Button</button>
    <div id="tab-1">Hello World 1</div>
    <div id="tab-2">Hello World 2</div>
    <div id="tab-3">Hello World 3</div>
    <div id="tab-4">Hello World 4</div>
</div>

jQuery

$('#tabs').tabs();

CSS

#tabs {
    padding: 0px;
    background: none;
    border-width: 0px;
}
#tabs .ui-tabs-nav {
    padding-left: 0px;
    background: transparent;
    border-width: 0px 0px 1px 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-bottom: 1px solid black;
}
#tabs .ui-tabs-panel {
    border-width: 0px 1px 1px 1px;
}

.ui-tabs-selected {
    font-weight: bold !important;
}

fiddle

Answer 1

您需要将您的按钮包裹在一个带有自己边框的 div 中。您的问题是该按钮正在下推您的标签内容容器。

new fiddle

<div id="tabs">
  <ul>
      <li> <a href="#tab-1">Tab 1</a></li>
      <li> <a href="#tab-2">Tab 2</a></li>
      <li> <a href="#tab-3">Tab 3</a></li>
      <li> <a href="#tab-4">Tab 4</a></li>
  </ul>
  <div id="button-wrapper">
    <button style="margin: 1em 1.4em">Button</button>
  </div>
  <div id="tab-1">Hello World 1</div>
  <div id="tab-2">Hello World 2</div>
  <div id="tab-3">Hello World 3</div>
  <div id="tab-4">Hello World 4</div>
</div>