我试图在 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;
}
最佳答案
您需要将您的按钮包裹在一个带有自己边框的 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>
关于jquery - jquery 选项卡中的按钮在所有选项卡中可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31308285/