奥门巴黎人手机网址【app】

JQuery对class属性的操作完成开关开关效果

2019-09-13 09:19·澳门巴黎人值得信赖

您大概感兴趣的小说:

  • 使用jQuery达成滑动开关开关效果(附demo源码下载)
  • jQuery 怎样完成四个滑行按键按钮
  • jquery.onoff完成轻松的按键按键效能(推荐)

新手求助js导航菜单难题
从网络下了叁个导航菜单,陈设到本身的品种上开掘出标题了。原来的领航菜单是5个选项,笔者加成8个之后前边的3个都呈现不出下拉的美食做法了。求教怎么消除啊,拜谢拜谢。

科技世界 1
上图是透过css和jquery美化后的法力,如何呢?是或不是很爽啊!那几个是笔者从另二个脚本库看到的三个功能,认为挺不错的,然后就用jquery自身完结了三个。供我们鉴赏!
话非常的少说,直接上代码:

跟着写JS脚本落成切换效果:

.header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1}
.header .logo{height:86px;width:256px;margin-top:25px}
.top-nav .navlist-wrap{width:1450px;margin:0 auto;position:relative}
.top-nav .navlist{position:absolute;right:130PX;top:-40PX}
.top-nav .navlist .nav-btn{float:left;margin-left:60px;color:#666;vertical-align:middle;text-decoration:none}
.navlist .nav-btn span{background:url(../images/broswer_home.png) no-repeat -29px -145px;display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:middle;*height:12px;*vertical-align:middle;*cursor:pointer;*letter-spacing:0;*margin-left:0;*background-position:-26px -145px}
.navlist .btn-active span{background:url(../images/broswer_home.png) no-repeat -8px -145px;*background-position:-5px -145px}
.top-nav .expand{height:0px;background-color:#333d4d;overflow:hidden;position:relative;width:100%}
.expand .download{height:130px;width:500%;}
.expand .download .item{float:left;width:20%}
.expand .download .item-active{display:block}
.expand .close-btn{width:120px;height:20px;background:url(../images/broswer_home.png) no-repeat -13px -117px;position:absolute;left:50%;bottom:-2px;margin-left:-60px;cursor:pointer;}
.download .download-list{text-align:center;height:56px;padding:37px}
.download .download-list .btn{display:inline-block;text-decoration:none;color:#586e91;font-size:18px;line-height:24px;margin:0 28px;cursor:pointer}
.download .download-list .btn:hover{color:#7896af}
.download-list .btn .icon{background-repeat:no-repeat;background-image:url(../images/broswer_home.png);height:56px;width:56px;float:left}
.download-list .btn .text{float:left;padding:16px 0 16px 16px}
.download-list .zj .icon{background-position:-4px 0}
.download .download-list .zj{}
.download .download-list .zj:hover .icon{background-position:-5px -57px}
.download .download-list .sjgj{}
.download .download-list .sjgj .icon{background-position:-58px 0}
.download .download-list .sjgj:hover .icon{background-position:-59px -58px}
.download .download-list .wdj{}
.download-list .wdj .icon{background-position:-169px -4px}
.download-list .wdj:hover .icon{background-position:-169px -64px}
.download .download-list .jy{}
.download-list .jy .icon{background-position:-114px 0}
.download-list .jy:hover .icon{background-position:-114px -62px}
.download-list .apple .icon{background-position:-225px -1px;width:38px}
.download-list .apple:hover .icon{background-position:-225px -58px}
.download-list .itools .icon{background-position:-270px 0}
.download-list .itools:hover .icon{background-position:-270px -57px}
.top-nav .nav-bottom-bg{height:7px;_font-size:1px;background-color:#fff}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>营造特性化的单选框和复选框</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-size: 12px;
}
.formt
{
width: 400px;
margin: 10px auto;
border: 1px solid #ccc;
height: 200px;
padding: 10px;
}
.unselected
{
background-image: url(rdo_off.png);
}
.selected
{
background-image: url(rdo_on.png);
}
.unchecked
{
background-image: url(chk_off.png);
}
.checked
{
background-image: url(chk_on.png);
}
.f_checkbox, .f_radio
{
background-position: 3px center;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 16px;
line-height: 120%;
padding: 4px 24px;
}
.formt input
{
left: -9999px;
position: absolute;
}
.addcolor
{
color: Red;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
<script type="text/javascript">
$(
function () {
//单选
$(".f_radio").click(
function () {
$(this).addClass("selected").removeClass("unselected").siblings(".selected").removeClass("selected").addClass("unselected");
}
);
//复选
$(".f_checkbox").toggle(
function () {
$(this).addClass("checked");
$(this).children("input").attr("checked", "checked");
},
function () {
$(this).removeClass("checked");
$(this).children("input").removeAttr("checked");
}
);
}
);
</script>
</head>
<body>
<div class="formt">
<label class="f_radio unselected">
<input type='radio' name="height" value="dwarf" />
网络办税标准版</label>
<label class="f_radio unselected">
<input type="radio" name="height" value="average" />
英特网报税职业版</label>
<label class="f_radio unselected">
<input type="radio" name="height" value="giant" />
其他</label>
<hr />
<label class="f_checkbox unchecked">
<input type="checkbox" name="newsletter" value="c" id="c" />
小票认证</label>
<label class="f_checkbox unchecked">
<input type="checkbox" name="newsletter" value="d" id="d" />
涉税认证</label>
</div>
<label for="male">
Male</label>
<input type="checkbox" name="sex" id="male" />
</body>
</html>

再定义三个超链接标签:

客商管理 会员消息管理 接济诉求 接口扶助管理 工作日历分享 接口测量检验管理测验用例管理 知识库

复制代码 代码如下:

}else{
target.removeClass("controlOn");
target.addClass("controlOff");

科技世界,有的页面代码:

图片大家能够协和截图。

复制代码 代码如下:

$('#expandZone #closeBtn').on('click', function() {
$('#expandZone').animate({height: '0px'}, function () {
$.removeClass;
$('#navList .btn-active').removeClass('btn-active');
});
return false;
});
});

你或然感兴趣的小说:

  • jquery 操作单选框,复选框,下拉列表实今世码
  • 引入11款jQuery开荒的复选框和单选框美化插件
  • Jquery为单选框checkbox绑定单击click事件
  • JQUE汉兰达Y对单选框(radio)操作的小例子
  • jquery操作下拉列表、文本框、复选框、单选框集结(收藏)
  • jquery单选框radio绑定click事件达成方式
  • JQuery判别radio(单选框)是或不是选仲春获取选中值方法总括
  • jQuery落成开关的点击 全选/反选 单选框/复选框 文本框 表单验证
  • Labelauty–jQuery单选框/复选框美化插件分享