用纯html代码写TAB
发布网友
发布时间:2022-04-27 12:00
我来回答
共2个回答
热心网友
时间:2022-04-19 07:52
纯html的意思至少应该有css和JS吧?两种解决方案:
方案1:多个标签,下面的DIV只需要一个,每切换到一个标签通过ajax获取相应数据,然后填充到div中,这个因为涉及到ajax你可能不会,所以跳过,用下一个
文案2:标签与下面的DIV一一对应,DIV默认先全部隐藏,切换到哪个标签就显示对应的DIV。
先来样式表
<style type="text/css">
a{border:1px solid #f00;margin:10px;padding:10px;}
div.show{display:none;border:1px solid #00f;padding:20px;margin:20px}
</style>
再来html
<p>
<a>标签1</a><a>标签2</a><a>标签3</a>
</p>
<div class="show" id="show0">内容1</div>
<div class="show" id="show1">内容2</div>
<div class="show" id="show2">内容3</div>
JS脚本
$("p a").mouseover(function () {
$(".show").hide();
$("#show" + $(this).index()).fadeIn(500)
})