小编Mic*_*iko的帖子

如何使用HTML CSS制作UL选项卡

试图找出如何做到这一点.我有风格但我想点击标签后会发生一些事情.当我单击选项卡时,我希望显示和隐藏选项卡类名称的div.我假设这是如何工作的.现在当我点击标签时没有任何反应.

这是我的HTML

    <style type="text/css">
      ul.tabs {
          display: table;
          list-style-type: none;
          margin: 0;
          padding: 0;
      }

      ul.tabs>li {
          float: left;
          padding: 10px;
          background-color: lightgray;
      }

      ul.tabs>li:hover {
          background-color: lightgray;
      }

      ul.tabs>li.selected {
          background-color: lightgray;
      }

      div.content {
          border: 1px solid black;
      }

      ul { overflow: auto; }

      div.content { clear: both; }
    </style>
<body>
    <ul class="tabs">
        <li><a href="#tab1">Description</a></li>
        <li><a href="#tab2">Specs</a></li>
    </ul>
    <div class="pane">
        <div class="tab1">
            <div><h2>Hello</h2></div>
        <div />
        <div>Hello hello hello.</div>
        <div />
        <div>Goodbye goodbye, goodbye</div>
        <div />
        <div />

        </div> …
Run Code Online (Sandbox Code Playgroud)

html css tabs html-lists

2
推荐指数
1
解决办法
4万
查看次数

标签 统计

css ×1

html ×1

html-lists ×1

tabs ×1