Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
        <table id="file_content" cellspacing="0" cellpadding="0">
            <tr><td>File Content</td></tr>
            <tr>
                <td>
                    <ul id="tabs">
                        <li><a href="#about">About JavaScript tabs</a></li>
                        <li><a href="#advantages">Advantages of tabs</a></li>
                        <li><a href="#usage">Using tabs</a></li>
                    </ul>
​
                    <div class="tabContent" id="about">
                      <h2>About JavaScript tabs</h2>
                      <div>
                        <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
                        <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
                      </div>
                    </div>
​
                    <div class="tabContent" id="advantages">
                      <h2>Advantages of tabs</h2>
                      <div>
                        <p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
                        <p>They're also good for things like multi-step Web forms.</p>
                      </div>
                    </div>
​
                    <div class="tabContent" id="usage">
                      <h2>Using tabs</h2>
                      <div>
                        <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
                      </div>
                    </div>
​
                </td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
</body>
</html>
 
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
        ul#tabs li { display: inline; }
        ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
        ul#tabs li a:hover { background-color: #f1f0ee; }
        ul#tabs li a.selected {
           color: #000;
          background-color: #fff;
          font-weight: bold;
          border-bottom: 2px solid white;
        }
​
        div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #fff; }
        div.tabContent.hide { display: none; }
​
​
      #file_content {
        width: 100%;
        border: 1px solid red;
      }
      #file_content td {
        padding: 5px;
​
      }
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
qolamipro
0viewers