jquery基础练习-选项卡切换

最新推荐文章于 2024-08-25 15:44:54 发布

wz前端初学者

最新推荐文章于 2024-08-25 15:44:54 发布

阅读量333

点赞数

文章标签：选项卡 jquery tab 切换

本文链接：https://blog.csdn.net/wz13759497175/article/details/79293910

版权

原理与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>