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

2019-07-24 00:34:10 阅读：201 来源： 互联网

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

解决方法:

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

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;

}

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

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

标签：html,javascript,css,tabs,xhtml
来源： https://codeday.me/bug/20190723/1518314.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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