jq实现点击和键盘Tab键切换选项卡
今天要给大家分享的是《jq实现点击和键盘Tab键切换选项卡》，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq实现点击和键盘Tab键切换选项卡</title>
<style>
#sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;}
#tab-title h3{color:#666;font-size:15px;font-weight:400;}
#tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/
#tab-title a,#tab-title a:visited{
padding:5px 9px 5px 10px;
border:1px solid #ccf;
border-right:0px;
margin-left:-1px;
cursor:pointer;
color:#444;
text-decoration:none;
outline:none
}
#tab-content .hide{display:none;} /*默认让第一块内
</style>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>
var $tab = $('#sidebar-tab');
$tab.on('click focus', 'h3 a', function(e) {
e.preventDefault();
$(this).addClass("selected").siblings().removeClass();
$tab.find('ul:eq(' + $(this).index() + ')')
.removeClass('hide').siblings().addClass('hide');
});
</script>
</head>
<body>
<div id="sidebar-tab">
<div id="tab-title">
<h3><a href="">最新评论</a><a href="">近期热评</a><a href="">随机文章</a></h3>
</div>
<div id="tab-content">
<ul><li>1234567890-1</li></ul>
<ul><li>1234567890-2</li></ul>
<ul><li>1234567890-3</li></ul>
</div>
</div>
</body>
</html>具体效果如下图：
下一篇： js如何实现全选,不选,反选？
上一篇：NumPy 迭代数组
评论