Jquery实例-Tab页的实现

最新推荐文章于 2025-06-19 12:40:23 发布

原创最新推荐文章于 2025-06-19 12:40:23 发布 · 980 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript中tab页实现 #jquery中tab页实现 #jquery #javascript #tab

Jquery实例专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何使用HTML、CSS和jQuery实现Tab页效果，包括Tab标题和内容区域的动态切换。提供了详细的代码示例，包括CSS样式、HTML结构和jQuery事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Tab页效果演示地址：http://blog.zxtms.net/blog/WorkPace/Jquery/jqueryTab/tab1.html

截图效果：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab页</title>
	<link rel="stylesheet" href="tab1.css" />

	<script src="../jquery-1.8.3.js"></script>
	<script src="tb1.js"></script>
</head>
<body>
    <!-- tab标题
    快捷生成方式div>ul>li*3
     -->
     <div class="tabTitle">
     	<ul>
     		<li class="current">java</li>
     		<li>c++</li>
     		<li>php</li>
     	</ul>
     </div>
     
    <div class="tabContent">
    	<div >我是java</div>
    	<div class="hide">我是c++</div>
    	<div class="hide">我是php</div>
    </div>
</body>
</html>

$(document).ready(function(){

  $titleLi =$(".tabTitle ul li");

  $contentDiv = $(".tabContent div");
   
  var time = null;

//当鼠标指针位于元素上方时，会发生 mouseover 事件。
  $titleLi.mouseover(function()
  {
      var _this = $(this);
      //设置定时器
      time = setTimeout(function(){
      //sibling()方法获取所以同辈元素     
      _this.addClass("current").siblings().removeClass("current");
      //获取当前元素索引
      var index=_this.index();
      //通过索引改变内容
      $contentDiv.eq(index).show().siblings().hide();
       },300);

  });

//当鼠标指针移开，会发生 mouseout事件。
  $titleLi.mouseout(function(){
  //清除定时器
   clearTimeout(time);
  });




});

/**所有标签清零*/
*{
	
	padding: 0;
	margin: 0;
 }

body{
    margin: 50px;
 }

/*修改li标签的显示风格*/
li{
	list-style-type: none;
}

/*清除ul浮动*/
.tabTitle ul{
  overflow: hidden;		
}

.tabTitle  ul li
{
    
    float:left;
    height: 30px;
    line-height: 30px; /*设置行高*/
    border: 1px solid #abcdef;  /*设置boder边框样式*/
    padding: 0 15px;  /*设置内边距*/
    margin-right: 3px;
    cursor: pointer;   /*设置鼠标样式为手状*/
}


.tabContent div{
	width: 300px;
	height:300px;
	border: 1px solid #abcdef;  /*设置boder边框样式*/
	padding: 15px;
}

.current{
	background: #abcdef; 
	color:#fff;  /*设置字体颜色*/
}

.hide
{
	display: none; /*隐藏属性*/
}