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>

Answer 2

尝试

$('#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>

Answer 3

将你的按钮包裹在一个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;
}

所有选项卡中都可以看到jquery选项卡中的按钮

3 个答案: