試圖讓垂直製表符工作

我想讓垂直製表符爲我的練習網站工作。我是html新手，但幾個小時以來一直困擾着這個，任何幫助表示讚賞！這就是問題所在：當我將this網站的代碼實施到我的項目中時，它顯得很奇怪，不像開頭。這裏是我的文件和錯誤圖片。試圖讓垂直製表符工作

<!DOCTYPE html> 
<html> 
<body> 
    <header> 
    </header> 
    <p><font face="verdana"size="5">About Me</font></p> 
    <br> 
    <p><font face="verdana"size="5">Programming Work</font></p> 
    <br> 
    <p><font face="verdana" size="5">About This Website</font></p> 
    ul class="tabs vertical" data-tab> 
    <li class="tab-title active"><a href="#panel11">Tab 1</a></li> 
    <li class="tab-title"><a href="#panel21">Tab 2</a></li> 
    <li class="tab-title"><a href="#panel31">Tab 3</a></li> 
    <li class="tab-title"><a href="#panel41">Tab 4</a></li> 
    </ul> 
    <div class="tabs-content"> 
    <div class="content active" id="panel11"> 
     <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p> 
    </div> 
    <div class="content" id="panel21"> 
     <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p> 
    </div> 
    <div class="content" id="panel31"> 
     <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p> 
    </div> 
    <div class="content" id="panel41"> 
     <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p> 
    </div> 
    </div>

網站引我沒有任何的CSS或JS，所以我認爲這是可行的。任何幫助將被認爲是！

來源

2016-03-21 I. Winson

要做到這一點很容易，你將需要的不僅僅是html。我最喜歡的方式是將AngularJS用於UI的TabBand和Bootstrap。

但是，jQuery就足夠了。

在線爲您找到一個示例。我沒有信任代碼。 http://jsfiddle.net/tj_vantoll/nn2qw/

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<style> 
    .ui-tabs.ui-tabs-vertical { 
     padding: 0; 
     width: 42em; 
    } 
    .ui-tabs.ui-tabs-vertical .ui-widget-header { 
     border: none; 
    } 
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav { 
     float: left; 
     width: 10em; 
     background: #CCC; 
     border-radius: 4px 0 0 4px; 
     border-right: 1px solid gray; 
    } 
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li { 
     clear: left; 
     width: 100%; 
     margin: 0.2em 0; 
     border: 1px solid gray; 
     border-width: 1px 0 1px 1px; 
     border-radius: 4px 0 0 4px; 
     overflow: hidden; 
     position: relative; 
     right: -2px; 
     z-index: 2; 
    } 
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a { 
     display: block; 
     width: 100%; 
     padding: 0.6em 1em; 
    } 
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover { 
     cursor: pointer; 
    } 
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { 
     margin-bottom: 0.2em; 
     padding-bottom: 0; 
     border-right: 1px solid white; 
    } 
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child { 
     margin-bottom: 10px; 
    } 
    .ui-tabs.ui-tabs-vertical .ui-tabs-panel { 
     float: left; 
     width: 28em; 
     border-left: 1px solid gray; 
     border-radius: 0; 
     position: relative; 
     left: -1px; 
    } 
</style> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
     <li> 
      <a href="#a">Tab A</a> 
     </li> 
     <li> 
      <a href="#b">Tab B</a> 
     </li> 
     <li> 
      <a href="#c">Tab C</a> 
     </li> 
     <li> 
      <a href="#d">Tab D</a> 
     </li> 
    </ul> 
    <div id="a"> 
     Content of A 
    </div> 
    <div id="b"> 
     Content of B 
    </div> 
    <div id="c"> 
     Content of C 
    </div> 
    <div id="d"> 
     Content of D 
    </div> 
</div> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
<script> 
    $('#tabs') 
     .tabs() 
     .addClass('ui-tabs-vertical ui-helper-clearfix'); 
</script> 
</body> 
</html>

來源

2016-03-21 03:35:42 MrWitts

試圖讓垂直製表符工作

回答

相關問題