jq选项卡实现-弹出层效果

最新推荐文章于 2019-02-27 20:28:00 发布

qq_32444825

最新推荐文章于 2019-02-27 20:28:00 发布

阅读量595

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/qq_32444825/article/details/77658129

版权

==========

1.提示中多行显示：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用jq实现选项卡</title>

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello“+“\n”+” world!");
});
</script>

=================

2.jq选项卡实现：

js：

$(function(){
$('.ct:gt(0)').hide(); //类ct大于0的div被隐藏

var hdw = $('.box ul li'); //找到需要jq的对象
hdw.hover(function(){ //鼠标移到选项卡上改变背景颜色
$(this).addClass('two') //给指向鼠标所在选项卡添加背景色样式
.siblings().removeClass('two'); //其他兄弟姊妹去掉背景样式
});

hdw.click(function(){ //点击时添加背景样式
$(this).addClass('one')
.siblings().removeClass(); //未被点击的选项卡去掉背景样式

var hdw_index = hdw .index(this);