1：控制字体大小
<!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>字体变大变小</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<style type="text/css">
span{
display: inline-block;
width: 80px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #F296B2;
}
</style>
<script type="text/javascript">
$(function(){
$("span").click(function(){
var thisEle = $("#para").css("font-size");//获取当前段落字体大小
var textFontSize = parseInt(thisEle , 10);//函数可解析一个字符串，并返回一个整数。10代表进行10进制解析
var unit = thisEle.slice(-2); //获取单位 例如px
var cName = $(this).attr("class");//获取当前的类
if(cName == "bigger"){
if( textFontSize <= 22 ){
textFontSize += 2;
}
}else if(cName == "smaller"){
if( textFontSize >= 12 ){
textFontSize -= 2;
}
}
$("#para").css("font-size", textFontSize + unit);
});
});
</script>
</head>
<body>
<div class="msg">
<div class="msg_caption">
<span class="bigger" >放大</span>
<span class="smaller" >缩小</span>
</div>
<div>
<p id="para">
Failure is probably the fortification in your pole. It is like a peek your wallet as the thief
</p>
</div>
</div>
</body>
</html>
2: 选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:240px;margin:50px;}
.tab_menu { clear:both;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#F296B2;}
.tab_menu li.selected { color:#FFF; background:#FF5500;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
</style>
<script type="text/javascript" >
$(function(){
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){//添加点击事件
$(this).addClass("selected") //当前选项添加样式
.siblings().removeClass("selected"); //同辈的li都除去样式
var index = $div_li.index(this); //获取当前li的索引
$("div.tab_box > div") //内容区
.eq(index).show() //等于当前选项卡的索引显示
.siblings().hide(); // 同辈的div隐藏
}).hover(function(){//链式调用
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
})
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
<div class="tab_box">
<div>内容1</div>
<div class="hide">内容2</div>
<div class="hide">内容3</div>
</div>
</div>
</body>
</html>
</html>
3：表格内容过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<style type="text/css">
table{ border:0;border-collapse:collapse;}
div{font:normal 12px/17px Arial;}
td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
</style>
<script type="text/javascript">
$(function(){
$("#filterName").keyup(function(){//按下按键时
$("table tbody tr")
.hide()//隐藏所有tr
.filter(":contains('"+( $(this).val() )+"')")
.show();
//$(this).val()获取输入框的值
//:contains() 选择器选取包含指定字符串的元素。
//filter() 方法返回符合一定条件的元素。
}).keyup();
})
</script>
</head>
<body>
<div>
<br/>
筛选<input id="filterName" />
<br/>
</div>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>男</td><td>北京</td></tr>
<tr><td>李四</td><td>男</td><td>上海</td></tr>
<tr><td>沙金</td><td>女</td><td>周口</td></tr>
</tbody>
</table>
</body>
</html>
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
