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

- user525146

Answer 1

你需要将按钮放在一个带有边框的div中。你遇到的问题是按钮会压低选项卡内容容器。

请点击此处查看新的示例。

<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>

- JDupont

Answer 2

将您的按钮包装在一个 div 中，并给它左右两侧添加边框，如下所示：

<div class="btn-wrapper">
     <button style="margin: 1em 1.4em">Button</button>
</div>

.btn-wrapper{
    border-left: 1px solid black;
    border-right: 1px solid black;
}

- Vishal

Answer 3

尝试

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

#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 #aaaaaa;
}
#tabs .ui-tabs-panel {
  border-width: 0px 1px 1px 1px;
}
#tabs .btn-wrapper {
  border: 0 solid #aaaaaa;
  border-width: 0px 1px;
}
.ui-tabs-selected {
  font-weight: bold !important;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>

<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 class="btn-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>

- Arun P Johny

---

你的意思是使用 #btn-wrapper 而不是 #tabs .btn-wrapper。 - user525146