首页 Javascript正文

jq实现点击和键盘Tab键切换选项卡

启明SEO Javascript 2024-05-28 07:29:11 1418 1

今天要给大家分享的是《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>

具体效果如下图:

jq实现点击和键盘Tab键切换选项卡

评论

启明SEO微信

有什么问题欢迎添加微信咨询

好文推荐

实时访客入口页面出现bd_vid=标识是什么原因

实时访客入口页面出现bd_vid=标识是什么原因

最近查看百度实时访客,总是会看到入口页面会多......

有了微信视频号,但是没有发布权限,怎么开通

有了微信视频号,但是没有发布权限,怎么开通

视频号是微信在2020年1月19号开始内测的......

如何用python抓取爱企查企业信息

如何用python抓取爱企查企业信息

前段时间,经理让我去找一些企业的信息,我平常......

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

对于一般企业网站或者博客来说,对服务器的配置......

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

修改浏览指纹的方法其实也是很简单,主要使用到......

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

我遇到的问题是电脑原先安装过mysql,卸......