centos-stream-9 centos9 配置国内源 阿里云源
项目需求：甲方要求点击优势部分实现动态切换显示的DIV层。其实仔细分析，无非就是让div进行动态的隐藏和现实，这边我们依旧
使用jquery来实现我们的功能。注意，我们必须要在页面中引入jquery！可以使用百度的静态资源公共库。
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
初始状态，我们可以用优势组件来实现我们的显示层要求，如下图
如图，页面就一个优势部分，前端无其它div的显示内容。我们在后端其实建立2个div层。还有一个div层我们用css来进行强制隐藏！
.divshow1{
display:none;
}
其实分析之后发现，就会发现只是一个图片加了一个a标签才能实现组建的悬停改变颜色的效果。所以，我们要做的第一步：
使用jquery禁用a标签的跳转功能
代码如下：
<script type="text/javascript">
//隐藏某个div中a链接跳转功能
jQuery(function($) {
$('.home-show1 a').each(function(){
// this.click();
$(this).attr('href', '#');
$(this).click(function (event) {
event.preventDefault();
//alert("操，和谐成功了吗？");
});
});
});
</script>
测试之后发现，ok和谐成功。我们已经完成了第一步。下面我们来改变我们要显示的div的disaply属性
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
当然，我们这边不是说点开就好了，为了提高用户体验，而不是强奸用户，所以我们必须点开之后点击之后还能关隐藏div。所以，我们这边使用
使用jquery toggle( )
所以完整代码如下：
<script type="text/javascript">
//隐藏某个div中a链接跳转功能
jQuery(function($) {
$('.home-show1 a').each(function(){
// this.click();
$(this).attr('href', '#');
$(this).click(function (event) {
event.preventDefault();
$(".divshow1").toggle()
});
});
});
</script>
现在我们点击这个优势图层之后，可以正常显示div。再次点击也可以隐藏。非常ok。可以看出jquery的强大之处了吧？更多去企业项
目实战教程，请持续关注。企业项目需求，请直接联系我们！实打实的报价，实打实的做事！
相关文章
