jQuery实现左右切换2

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

weixin_45221951

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

阅读量173

点赞数

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

版权

<!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" onmouseover="setTab('case',1,2)" class="">成功案例</li>
           <li id="case2" onmouseover="setTab('case',2,2)" 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 setTab(name, num, n) {
        for (i = 1; i <= n; i++) {
          var menu = document.getElementById(name + i);
          var con = document.getElementById(name + "_" + "con" + i);
          menu.className = i == num ? "now" : "";
          con.style.display = i == num ? "block" : "none";
        }
      }
    </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实现左右切换2

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

扫一扫