时间:2013-5-4
作者:天空下的雨
分类: 网页技术
浏览:58356
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
<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
$(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
时间:2011-12-16
作者:天空下的雨
分类: 网页技术
浏览:13765
在做网站项目的时候,由于新老域名的问题,需要做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