用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

    解决一个技术问题,关于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

    使用JS的简单方法实现Rewrite的301域名转向

    时间:2011-12-16 作者:天空下的雨 分类: 网页技术 浏览:12766

    在做网站项目的时候,由于新老域名的问题,需要做301跳转,但发现虚拟主机不支持伪静态(Rewrite)功能,而项目全是php生成html的,动态方法也无法实现。

    于是想到了JS,不管是动态和静态页面都可以完美支持。分享出来,下面是JS代码实现方法:

    <script type="text/javascript">
    /* 跳转JS代码 */
    try 
    { 
    var s_domain = location.host; 
    var js_path = "www.68080.com"; 
    if (s_domain != js_path) 
    { 
    var str=window.location.href;
    var es=/sh96.cn/;
    es.exec(str);
    var right=RegExp.rightContext;
    top.location.href = "http://"+js_path+right; 
    } 
    } 
    catch(e) { } 
    </script>

    代码解释:

    代码中的第6行 www.68080.com 是新的域名地址,第10行 sh96.cn 则是老的域名。

    代码例子:

    当用户访问 http://sh96.cn/a/yinyue.html 的时候,

    自动跳转到 http://www.68080.com/a/yinyue.html 

    Continue