最近更新 » jquery

    用jQuery,简单实现Tab菜单切换

    时间:2013-5-4 作者:天空下的雨 分类: 网页技术 浏览:56792

    HTML代码结构

    <div id="sidebar-tab">
    	<div id="tab-title">
    		<h3><span class="selected">选项一</span><span>选项二</span><span>选项三</span></h3>
    	</div>
    	<div id="tab-content">
    		<ul>内容一</ul>
    		<ul class="hide">内容二</ul>
    		<ul class="hide">内容三</ul>
    	</div>
    </div>

    #tab-title是标题,#tab-content是对应的内容(其中三个ul内的代码是WP Kit CN插件调用相应标题内容的)。如果你要显示4个内容,则在标题和内容分别添加一个span和ul即可!

    22

    jQuery控制代码:鼠标滑过切换

    $('#tab-title span').mouseover(function(){
    	$(this).addClass("selected").siblings().removeClass();
    	$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
    });

    稍微陈述下控制代码的运作过程:鼠标移到一个标题(#tab-title span)时,该标题添加被选中(.selected)的效果,其他标题移除被选中的效果;同时,获取标题被选择的序号(.eq()),让内容中对应的子项(#tab-content ul)显示,其余子项隐藏。

     

    jQuery控制代码:鼠标点击切换

    $('#tab-title span').click(function(){
    	$(this).addClass("selected").siblings().removeClass();
    	$("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');
    });

    更改为点击标题切换,而且内容显示方式改用slideUp/slideDown,此次是改进jQuery代码,使HTML结构的适用性更强。

    Continue

    Jquery 简单代码实现菜单联动

    时间:2013-3-2 作者:天空下的雨 分类: 网页技术 浏览:24528

    网页代码:

    <div class="nav-list">
      <div class="item">菜单名字1</div>
      <div class="more">下级分类1</div>
      <div class="item">菜单名字2</div>
      <div class="more">下级分类2</div>
      <div class="item">菜单名字3</div>
      <div class="more">下级分类3</div>
    </div>
    JS代码

    $(document).ready(function(){	
    $('.nav-list .more').parent().mouseenter(function(){
    	$(this).removeClass('list_current');
    	$(this).addClass("list_current");
    	$(this).find('.more').show();
    }).mouseleave(function(){
    	$(this).removeClass('list_current');
    	$(this).find('.more').hide();
    });	
    });

     

    还需要加载Jquery,1.3以上版本。CSS代码,自己看代码写写吧,不知道意思,不知道写?自己搜搜百度或谷歌吧

     

    Continue

    解决一个技术问题,关于jquety的文本框实时计算

    时间:2013-1-27 作者:天空下的雨 分类: 网页技术 浏览:20046

    计算多个文本框的数值,比如两个文本框,一个是1,第二个是2,相加后实时显示3。change()事件,发现必须焦点离开才能触发,不满足我的要求,改用keyup()解决问题。下面是精确计算例子:

    	$(function(){
    		var first = $("#first");// 获得ID为first标签的jQuery对象
    		var second = $("#second");// 获得ID为first标签的jQuery对象
    		var sumSP = $("#sumSP");// 获得ID为first标签的jQuery对象
    		first.keyup(function(){
    			var num1 = first.val();// 取得first对象的值
    			var num2 = second.val();// 取得second对象的值
    			var sum = add(num1,num2);
    			sumSP.text(sum);
    		});
    		second.keyup(function(){
    			var num1 = first.val();
    			var num2 = second.val();
    			var sum = add(num1,num2);
    			sumSP.text(sum);
    		});
    	});
    	
    	function add(arg1,arg2){
    		var a1,a2,m;
    		try{
    			a1 = arg1.toString().split(".")[1].length
    		}catch(e){
    			a1 = 0;
    		}
    		try{
    			a2 = arg2.toString().split(".")[1].length
    		}catch(e){
    			a2 = 0;
    		}
    		m = Math.pow(10, Math.max(a1,a2));
    		return (arg1*m+arg2*m)/m;
    	}
    <body>
     <center>
     <form action="">
      第一个数:<input type="text" size="25" id="first" /><br /><br />
      第二个数:<input type="text" size="25" id="second" /><br /><br />
      它们的和:<span id="sumSP" style="color:red" ></span>
     </form>
     </center>
    </body>
    保留小数点两位:Math.round(parseFloat(value) * 100) / 100

    Continue