Question

我正在尝试使用垂直标签来为我的练习网站工作。我是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，所以我认为这样可行。任何帮助都会被贬低！

Answer 1

要轻松完成此操作，您需要的不仅仅是html。我最喜欢的方法是使用AngularJS作为用户界面的Tabbing和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>

试图让垂直标签工作

1 个答案: