垂直のタブを動かそうとしています

私の練習用ウェブサイトのために垂直タブを取得しようとしています。私はhtmlの新機能ですが、数時間、この問題に悩まされています。これは問題です。thisのWebサイトのコードを自分のプロジェクトに実装すると、それは最初のようなものではなく、奇妙なものになります。ここに私のファイルと何が間違っているの写真です。垂直のタブを動かそうとしています

<!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のためのブートストラップです。

しかし、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

垂直のタブを動かそうとしています

答えて

関連する問題