丰歌 » jQuery http://fengyouyi.com 一个懒人的个人博客 Fri, 18 May 2012 03:39:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 jQuery KinSlideshow 在 Chrome 浏览器下不显示的问题 http://fengyouyi.com/212 http://fengyouyi.com/212#comments Tue, 10 Apr 2012 07:13:01 +0000 Ulysses http://fengyouyi.com/?p=212 jQuery KinSlideshow plugin 插件用来做幻灯片图片展示效果，很方便，所以用得较多。但是最近发现部分页面在 Google Chrome 浏览器下幻灯片不显示。经过测试，发现是在 IMG 标签中少写了 WIDTH / HEIGHT 属性所致。看来偷懒是不行的。

解决方法也就很简单了，把 WIDTH、HEIGHT、ALT 什么的属性，都写上，就没问题了。

]]> http://fengyouyi.com/212/feed 0 jQuery：几行代码实现简单选项卡TABS效果 http://fengyouyi.com/173 http://fengyouyi.com/173#comments Sat, 04 Feb 2012 02:30:38 +0000 Ulysses http://fengyouyi.com/?p=173 做个记录。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>尝试用 jQuery 实现选项卡功能</title>
<style type="text/css">
page {
	font-size: 12px;
	padding: 40px;
}
ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
h2 {
	font-size: 12px;
	padding: 0;
	margin: 0;
}

.tabs {
	width: 403px;
	height: 108px;
	border: 1px solid #CCC;
}
.tabs li {
	line-height: 26px;
	height: 28px;
	float: left;
	position: relative;
}
.tabs h2 {
	text-align: center;
	background: #EEE;
	width: 100px;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	cursor: pointer;
}
.tabs h2.active {
	background: #FFF;
	border-bottom: 1px solid #FFF;
}
.tabs .tab_0 h2 {
	border-left: none;
}
.tabs .tab_0 div {
	display: block;
}
.tabs div {
	background: #FFF;
	display: none;
	width: 363px;
	height: 40px;
	border-top: none;
	padding: 20px;
	position: absolute;
	top: 28px;
	left: 0;
}

.tab_0 div {
	left: 0;
}
.tab_1 div {
	left: -100px;
}
.tab_2 div {
	left: -201px;
}
.tab_3 div {
	left: -302px;
}
</style>
<script type="text/javascript" language="javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
	$(".tabs li").hover(function() {
		$(this).siblings().children("h2").removeClass("active");
		$(this).siblings().children("div").hide();
		$(this).children("h2").addClass("active");
		$(this).children("div").show();
	}, function() {
		//
	});
});
</script>
</head>

<body>
<div class="tabs">
	<ul>
    	<li class="first tab_0">
        	<h2 class="active">选项卡一</h2>
            <div>
            	选项卡一的内容
            </div>
        </li>
    	<li class="tab_1">
        	<h2>选项卡二</h2>
            <div>
            	选项卡二的内容
            </div>
        </li>
    	<li class="tab_2">
        	<h2>选项卡三</h2>
            <div>
            	选项卡三的内容
            </div>
        </li>
    	<li class="tab_3">
        	<h2>选项卡四</h2>
            <div>
            	选项卡四的内容
            </div>
        </li>
    </ul>
</div>
</body>
</html>
]]> http://fengyouyi.com/173/feed 0