用纯html代码写TAB

用纯html代码写TAB,第1张

纯html的意思至少应该有css和JS吧?两种解决方案:

方案1:多个标签,下面的DIV只需要一个,每切换到一个标签通过ajax获取相应数据,然后填充到div中,这个因为涉及到ajax你可能不会,所以跳过,用下一个

文案2:标签与下面的DIV一一对应,DIV默认先全部隐藏,切换到哪个标签就显示对应的DIV。

先来样式表

<style type="text/css">

    a{border:1px solid #f00margin:10pxpadding:10px}

    div.show{display:noneborder:1px solid #00fpadding:20pxmargin: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)

    })

在一些网页或者说在d出层的使用下,一般情况在ie浏览器下 我们都不希望使用tab 或者说

使用tab键后都会造成一定的问题,例如:

在d出层后,tab键还可以在目页中 *** 作,这回导致脚本错误。

那么我们如果避免这种情况呢?

通过键盘事件来控制

$(document).ready(function () {

$(document).bind('keydown', function (event) {

if (event.keyCode == 9) {

document.body.focus()

}

})

})

以上代码很熟悉 就是按tab键的时候 将焦点再次移到tabindex为0的上面

那么我们这时便需要在页面开始的时候 就设置初始化的页面焦点

例如下面用aspx写的例子:

在一些特殊的情况下 我们需要在页面加载的时候设置一下焦点的位置,以便防止 tabindex的设置会出现无效 或受其他因素的影响.


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7158763.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存