Html 尝试使垂直选项卡正常工作_Html

Html 尝试使垂直选项卡正常工作

html

Html 尝试使垂直选项卡正常工作,html,Html,我正在尝试让垂直标签为我的实践网站工作。我对html还不熟悉，但已经在这个问题上被难倒了几个小时，任何帮助都将不胜感激！这就是问题所在：当我将网站中的代码实现到我的项目中时，它会以wierd的形式出现，而不是像开头那样。这是我的文件和错误的图片 <!DOCTYPE html> <html> <body> <header> </header> <p><font face="verdana"size="5"

我正在尝试让垂直标签为我的实践网站工作。我对html还不熟悉，但已经在这个问题上被难倒了几个小时，任何帮助都将不胜感激！这就是问题所在：当我将网站中的代码实现到我的项目中时，它会以wierd的形式出现，而不是像开头那样。这是我的文件和错误的图片

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


关于我


编程工作


关于本网站
ul class=“制表符垂直”数据制表符>





这是基本选项卡示例的第一个面板。您可以在此处放置各种内容，包括网格
这是基本选项卡示例的第二个面板。这是基本选项卡示例的第二个面板
这是基本选项卡示例的第三个面板。这是基本选项卡示例的第三个面板
这是基本选项卡示例的第四个面板。这是基本选项卡示例的第四个面板

我引用的网站没有任何css或js，所以我认为这会起作用。任何帮助都将不胜感激

要轻松做到这一点，您需要的不仅仅是html。我最喜欢的方法是使用AngularJS进行选项卡和引导UI

但是，jQuery就足够了

在网上为您找到了一个示例。我不相信这个密码


页面标题
.ui-tabs.ui-tabs-vertical{
填充：0；
宽度：42em；
}
.ui-tabs.ui-tabs-vertical.ui小部件标题{
边界：无；
}
.ui-tabs.ui-tabs-vertical.ui选项卡导航{
浮动：左；
宽度：10em；
背景：#CCC；
边界半径：4px 0 0 4px；
右边框：1px纯色灰色；
}
.ui-tabs.ui-tabs-vertical.ui选项卡导航li{
清除：左；
宽度：100%；
边际：0.2米0；
边框：1px纯色灰色；
边框宽度：1px 0 1px 1px；
边界半径：4px 0 0 4px；
溢出：隐藏；
位置：相对位置；
右：-2px；
z指数：2；
}
.ui-tabs.ui-tabs-vertical.ui-tabs导航李a{
显示：块；
宽度：100%；
填充物：0.6em 1em；
}
.ui-tabs.ui-tabs-vertical.ui-tabs导航李a：悬停{
光标：指针；
}
.ui-tabs.ui-tabs-vertical.ui-tabs-nav li.ui-tabs-active{
边缘底部：0.2米；
填充底部：0；
右边框：1px纯白；
}
.ui-tabs.ui-tabs-vertical.ui-tabs导航li:最后一个子项{
边缘底部：10px；
}
.ui-tabs.ui-tabs-vertical.ui选项卡面板{
浮动：左；
宽度：28em；
左边框：1px纯色灰色；
边界半径：0；
位置：相对位置；
左：-1px；
}










内容
B的含量
C的含量
D的含量
$（“#制表符”）
.tabs（）
.addClass（'ui-tabs-vertical ui-helper clearfix'）；

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