jquery基础练习-选项卡切换

原理与js选项卡切换相同

效果图如下:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		//$(document).ready()作用类似于js的window.onload
		$(document).ready(function(){
   			$("#head li").on("mouseover",function(){
   				var i=$(this).index();
   				//改变相应标题的样式,这里用addClass方法添加的新样式与原先样式相同的属性会被原先的样式覆盖掉,导致addClass方法失去作用,所以直接用css方法改变样式
   				$(this).css({
   					"background":"#CCFFFF",
   					"color":"black"
   				}).siblings().css({
   					"background":"#00CCFF",
   					"color":"white"
   				});
   				//显示相应标题的内容并隐藏其他内容
   				$("#content div").eq(i).show().siblings().hide();
   			});
		});
    </script>
	<style type="text/css">
		*{  
            margin: 0;  
            padding: 0;  
            font-size: 14px;  
        }  
        .main{  
            margin: 10px;  
        }  
        .main ul{  
            list-style-type: none;  
            height: 2em;  
        }  
        .main ul li{  
            float: left;  
            width: 5em;  
            height: 2em;  
            text-align: center;  
            line-height: 2em;  
            background: #00CCFF;  
            color: white;  
            margin-right: 10px;  
            cursor: pointer; 
        }  
        .main .content{  
            width: 300px;  
            padding: 10px;  
            background: #CCFFFF;  
        }  
        .content div{  
            display: none;  
        }  
        .content #first{  
            display: block;  
        }
	</style>
</head>
<body>
	<div class="main" id="main">  
        <ul class="head" id="head">  
            <li>栏目一</li>  
            <li>栏目二</li>  
            <li>栏目三</li>  
        </ul>  
        <div class="content" id="content">  
            <div id="first">  
                栏目一的内容<br>  
                栏目一的内容<br>  
                栏目一的内容<br>  
                栏目一的内容<br>  
            </div>  
            <div >  
                栏目二的内容<br>  
                栏目二的内容<br>  
                栏目二的内容<br>  
                栏目二的内容<br>  
            </div>  
            <div >  
                栏目三的内容<br>  
                栏目三的内容<br>  
                栏目三的内容<br>  
                栏目三的内容<br>  
            </div>  
        </div>  
    </div> 
</body>
</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值