编写HTML/CSS/JS选项卡导航系统的最佳方法(无图像)

Question

编写HTML/CSS/JS选项卡导航系统的最佳方法(无图像)

Wal*_*ker 3 html javascript css xhtml tabs

我正在为我的网站编写一个标签系统,它必须完全是CSS/HTML/JS(不使用任何图像).问题是,我一直在破解代码直到我完成它只是一团糟.我不知道是使用定位,还是浮动标签或什么.基本上一个大问题是,在我拿走所选标签的底部边框CSS后,我需要将其向下移动1px,以便它与排序标题无缝融合 - 我不知道是否使用保证金:-1px或位置:相对/绝对等.我喜欢一些关于编写像这样的标签系统的好方法的建议,以便它可以在整个网站上重复使用!

替代文字

Answer 1

tho*_*edb 5

这是CSS的一个例子,它使它工作:

HTML:

<body>
    <div class="tabs">
        <ul>
            <li><a href="#item1">Item 1</a></li>
            <li class="active"><a href="#item2">Item 2</a></li>
            <li><a href="#item3">Item 3</a></li>
        </ul>
        <div class="tabInner">
            <div id="item1">
                bla1
            </div>
            <div id="item2">
                bla2
            </div>
            <div id="item3">
                bla3
            </div>
        </div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS:

.tabs ul {
    list-style: none;
}

.tabs ul li {
    float: left;
    background: #eee;
    border: 1px #aaa solid;
    border-bottom: none;
    margin-right: 10px;
    padding: 5px;
}

.tabs ul li.active {
    margin-bottom: -1px;
    padding-bottom: 6px;
}

.tabInner {
    clear: both;
    border: 1px solid #aaa;
    height: 200px;
    overflow: hidden;
    background: #eee;
}

.tabInner div {
    height: 200px;
    padding: 10px;

}

Run Code Online (Sandbox Code Playgroud)

它甚至没有JS(在某种程度上).你仍然需要一些JS来移动'主动'类arround,如果你想要花哨的过渡.

在这里看到它:http://jsfiddle.net/V8CK4/

归档时间：	15 年，1 月前
查看次数：	20990 次
最近记录：	15 年，1 月前