jQuery实现左右切换

最新推荐文章于 2022-05-25 16:15:04 发布

weixin_45221951

最新推荐文章于 2022-05-25 16:15:04 发布

阅读量768

点赞数

分类专栏：一级文章标签： css js

本文链接：https://blog.csdn.net/weixin_45221951/article/details/103723545

版权

一级专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
	<div class="suc_case fr">
         <ul class="tab_nav">
           <li id="case1" class="">成功案例</li>
           <li id="case2" class="now">热门博文</li>
         </ul>
         <div class="case_con active cl" id="case_con1" style="margin-top: 30px; display: none;">
            <ul>
 
           <li><a href="../blog/zhangjieying3/case/1761550.shtml" target="_blank" title="面试结束3小时后双非材料学逆袭斩获京都大学材料学offer">面试结束3小时后双非材料学逆袭斩获京都大学材料学offer</a></li>
 
           <li><a href="../blog/caizhenyu/case/1754436.shtml" target="_blank" title="广州新东方前途英国部申请成功案例">广州新东方前途英国部申请成功案例</a></li>
 
           <li><a href="../blog/zhangyuanjun/case/1755215.shtml" target="_blank" title="山重水复疑无路，柳暗花明又一村 | 生物工程研究生申请案例">山重水复疑无路，柳暗花明又一村 | 生物工程研究生申请案例</a></li>
 
           <li><a href="../blog/qinhaixiyu/case/1761378.shtml" target="_blank" title="GPA3.3 从&quot;全聚德&quot;到哈佛录取">GPA3.3 从"全聚德"到哈佛录取</a></li>
 
           <li><a href="../blog/zengyi8/case/1730663.shtml" target="_blank" title="从川大预防医学到哈佛大学环境健康硕士">从川大预防医学到哈佛大学环境健康硕士</a></li>
 
           <li><a href="../blog/zengyi8/case/1755243.shtml" target="_blank" title="从广外翻译到常青藤大满贯">从广外翻译到常青藤大满贯</a></li>
 
            </ul>
         </div>
         <div class="case_con cl" id="case_con2" style="margin-top: 30px; display: block;">
            <ul>
  
           <li><a href="../blog/guqinyuan/blog/1756106.shtml" target="_blank" title="瑞典移民局推出两年学生签证试点项目">瑞典移民局推出两年学生签证试点项目</a></li>
 
           <li><a href="../blog/zengyi8/blog/1755233.shtml" target="_blank" title="英语专业何去何从">英语专业何去何从</a></li>
 
           <li><a href="../blog/yinxing5/blog/1729884.shtml" target="_blank" title="日本研究生和硕士的区别">日本研究生和硕士的区别</a></li>
 
           <li><a href="../blog/liutiantian6/blog/1747202.shtml" target="_blank" title="盘点美研留学10大理工科专业">盘点美研留学10大理工科专业</a></li>
 
           <li><a href="../blog/liutiantian6/blog/1753033.shtml" target="_blank" title="《2019美国门户开放报告》发布，美国留学有哪些新变化？">《2019美国门户开放报告》发布，美国留学有哪些新变化？</a></li>
 
           <li><a href="../blog/zhangyuanjun/blog/1739062.shtml" target="_blank" title="美国研究生留学申请的六大疑问">美国研究生留学申请的六大疑问</a></li>
 
            </ul>
         </div>
         </div>


         <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

         <script type="text/javascript">
         	$(function(){
         		var ol = $(".tab_nav li");
         		var lbox = $(".case_con");
         		for (var i = 0; i < ol.length; i++) {
         			ol[i].index = i;
         			ol[i].onmouseover = function(){
         				for (var i = 0; i < ol.length; i++) {
         					ol[i].className = "";
         					lbox[i].style.display = "none";
         				}
         				this.className = "now";
         				lbox[this.index].style.display = "block";
         			}
         		}
         	});
         </script>
</body>
</html>

html,body,div,a,ul,li {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

.suc_case {
    width: 240px;
    height: 260px;
    background: #fef7eb;
    padding: 20px;
}
.fr {
    margin: 30px auto;
}

.suc_case .tab_nav #case1, #bkCase1, #zxCase1, #xyzCase1 {
    border-right: 1px solid #666;
    padding-left: 0;
}
.suc_case .tab_nav li {
    line-height: 20px;
    float: left;
    color: #666;
    padding: 0 15px;
    font-size: 20px;
    cursor: pointer;
    font-family: "微软雅黑";
}

.suc_case .case_con.active {
    display: block;
}

.suc_case .case_con ul li {
    width: 224px;
    height: 38px;
    overflow: hidden;
    padding-left: 16px;
    background: url(circle.jpg) no-repeat left center;
}

.suc_case .case_con ul li a {
    color: #333;
    line-height: 38px;
}

a {
    cursor: pointer;
}

.suc_case .tab_nav li.now {
    color: #f39800;
}

.suc_case .case_con {
    display: none;
    margin-top: 30px;
}
.cl {
    clear: both;
}

在这里插入图片描述

weixin_45221951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现左右切换

<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="demo.css"></head><body> <div class="suc_case fr">...
复制链接

扫一扫