Tworzenie pionowego Tab użyciu html css

Question

Cześć,

Jestem projektowania strony z zakładki pionowej. Ale nie jestem pewien, jak osiągnąć ten projekt. Nie chcę używać żadnego javascript, jquery itp. Planowanie tworzenia osobnych widoków dla każdego elementu menu z kartą. Mogę więc zmienić aktywną kartę w każdym widoku. Pomóż rozwiązać ten problem. Nie mam dużo kodu do opublikowania. Proszę podać kilka linków, aby poruszać się we właściwym kierunku .. Z góry dziękuję.

To co zrobiłem do acheive projekt

<style> 
#content 
{ 
    background-color: #f2f2f2; 
    padding: 20px 10px; 
    overflow: auto; 
} 
#tab-container 
{ 
    float: left; 
    margin: 50px 0 0 0; 
    width: 126px; 
} 
#tab-container ul 
{ 
    list-style: none; 
    text-align: center; 
} 
#tab-container ul li 
{ 
    border-top: 1px solid #666; 
    border-right: 1px solid #666; 
    border-bottom: 1px solid #666; 
    border-left: 8px solid #666; 
    background-color: #ddd; 
    margin: 8px 0; 
} 
#tab-container ul li a, 
#tab-container ul li a:visited 
{ 
    text-decoration: none; 
    color: #666; 
    display: block; 
    padding: 15px 5px; 
} 
#tab-container ul li:hover 
{ 
    border-left: 8px solid #333; 
} 
#tab-container ul li a:hover 
{ 
    color: #000; 
} 
#tab-container ul li.selected 
{ 
    border-right: none; 
    background-color: #fff; 
    border-left: 8px solid #006699; 
} 
#main-container 
{ 
    min-height: 400px; 
    margin: 0 0 0 125px; 
    padding: 20px; 
    background-color: #fff; 
    border: 1px solid #888; 
} 
</style> 
    <div id="content"> 
    <div id="tab-container"> 
     <ul> 
     <li class="selected"><a href="">Introduction</a></li> 
     <li><a href="">Html</a></li> 
     <li><a href="">CSS</a></li> 
     <li><a href="">JavaScript</a></li> 
     </ul> 
    </div> 
    <div id="main-container"> 
     <h1>Put your content here...</h1> 
    </div> 
</div> 

Answer 1

Poniższy link będzie proste i użyteczne

The link will be as you expected with a little javascript

http://bobcravens.com/demos/vertical_tabs/index.html

Answer 2

Mogę pewien below demo użyteczne dla was;

DEMO

DEMO1

HTML

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

CSS

.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; 
} 

js

<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 type="text/javascript"> 
    $('#tabs') 
     .tabs() 
     .addClass('ui-tabs-vertical ui-helper-clearfix'); 

    </script>