加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
pest.html 2.12 KB
一键复制 编辑 原始数据 按行查看 历史
Your Name 提交于 2018-04-26 21:34 . add
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>病虫害诊断系统</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pest_btn">
<ul class="corn_ul clearfix">
<li>
<span class="corn_span">玉米<em></em></span>
<div class="corn_div">
<a href="javascript:;">水稻</a>
<a href="javascript:;">烟草</a>
</div>
</li>
<li>
<span class="corn_span">虫害<em></em></span>
<div class="corn_div">
<a href="javascript:;">病害</a>
</div>
</li>
</ul>
</div>
<div class="pest">
<ul class="pest_ul clearfix">
<li><a href="#"><img src="images/pest1.jpg"></a></li>
<li><a href="#"><img src="images/pest1.jpg"></a></li>
<li><a href="#"><img src="images/pest1.jpg"></a></li>
<li><a href="#"><img src="images/pest1.jpg"></a></li>
<li><a href="#"><img src="images/pest1.jpg"></a></li>
<li><a href="#"><img src="images/pest1.jpg"></a></li>
<li><a href="#"><img src="images/pest1.jpg"></a></li>
<li><a href="#"><img src="images/pest1.jpg"></a></li>
<li><a href="#"><img src="images/pest1.jpg"></a></li>
</ul>
</div>
</body>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$('.corn_ul li').last().addClass('on')
$(function(){
$('.corn_ul li').click(function(){
var index=$('.corn_ul li').index(this);
$('.corn_div').slideUp()
if($(".corn_div").eq(index).is(":hidden"))
{
$('.corn_div').eq(index).slideDown()
$('.corn_ul span').eq(index).addClass('on').siblings().removeClass('on');
}else{
$('.corn_div').eq(index).slideUp()
$('.corn_ul span').eq(index).removeClass('on')
}
})
$('.corn_div a').click(function(){
var index=$(this).html()
var indexhtml=$(this).parents('.corn_ul li').find('.corn_span').text()
$(this).parents('.corn_ul li').find('.corn_span').html(index)
$(this).html(indexhtml)
})
})
</script>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化