Clever Geek Handbook

Button on jquery tabs showing in all tabs

I am trying to add a button on jquery tabs that are visible in all tabs, I changed the css of the jquery tabs to make the border closed for tabs, there is no border next to the button.

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

+3


source to share


3 answers


You will want to wrap your button in a div with its own border. Your problem is the button is clicking on your tab content containers.

new violin



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


source


Try



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


+2


source


Wrap your button in a div and give it a left and right border like:

<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;
}
+2


source






More articles:


All Articles