利用jQuery實現Tab選項卡

disable發表於2021-09-09
jQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
{
margin: 0px;
padding: 0px;
font-family: 微軟雅黑;
}
.menu{
height: 50px;
background: #272822;
}
.menu a{
display: block;
height: 50px;
width: 80px;
color: #fff;
float: left;
line-height: 50px;
text-decoration: none;
font-size: 20px;
/border: 1px solid red;*/
text-align: center;
}
.menu a:first-child{
background: #888;
}
.info{
height: 200px;
color: #fff;
background: #888;
overflow: hidden;
}
.info p{
padding: 20px;
line-height: 30px;
display: none;
}
.info p:first-child{
display: block;     //  把第一個進行顯示出來
}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.8.3.js"></script>
</head>
<body>
<div class="menu">
<a href="">html</a>
<a href="">js</a>
<a href="">jQuery</a>
</div>
<div class="info">
<p>html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言</p>

    <p>js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言</p>    <p>jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言</p></div>

</body>
<script type="text/javascript">
$('.menu a').mouseover(function(){
// 讓其他的a標籤的背景顏色都去掉
$('.menu a').css({'background':'#272822'});
// 把當前的a標籤的背景顏色改變
$(this).css({'background':'#888'});
//獲取索引
index=$(this).index('.menu a');  
// 隱藏掉所有的p標籤
$('.info p').hide();
// 顯示出當前的p標籤
$('.info p').eq(index).show();

});
</script>
</html>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/200/viewspace-2817162/，如需轉載，請註明出處，否則將追究法律責任。

相關文章