标签：clear user ott data function content 个数 span lis
<!DOCTYPE html>
<html>
<head>
<title>测试文件</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script src="js/jquery.js"></script>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
ul{
margin: 0 auto 0;
padding: 0;
width: 300px;
}
li{
list-style: none;
width: 100px;
height: 44px;
float: left;
text-align: center;
background: #ddd;
line-height: 44px;
cursor: pointer;
}
.clearfix{
clear: both;
}
.red{
color: #fff;
background: red;
}
dl{
margin-top: 44px;
padding: 0;
margin: 0;
width: 100%;
}
dl dd{
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li class="red">第一个数据</li>
<li>第二个数据</li>
<li>第三个数据</li>
<div class="clearfix"></div>
</ul>
<div class="clearfix"></div>
<dl>
<dd></dd>
</dl>
<script>
$("ul li").click(function(){
var index=$(this).index();
var guonei=‘‘;
switch (index)
{
case 0:
guonei=‘a‘;
$(this).addClass(‘red‘).siblings().removeClass();
break;
case 1:
guonei=‘b‘;
$(this).addClass(‘red‘).siblings().removeClass();
break;
case 2:
guonei=‘c‘;
$(this).addClass(‘red‘).siblings().removeClass();
}
$.post("/js/data.php", {
name:guonei,url:"http://本机ip地址/ceshi01.html"
}, function(data){
$(‘dl dd‘).html(data);
});
});
</script>
</body>
</html>
PHP文件
<?php
$name = isset($_POST[‘name‘]) ? htmlspecialchars($_POST[‘name‘]) : ‘‘;
$url = isset($_POST[‘url‘]) ? htmlspecialchars($_POST[‘url‘]) : ‘‘;
switch ($name)
{
case ‘a‘:
echo ‘这是第一个li请求的数据‘;
break;
case ‘b‘:
echo ‘这是第二个li请求的数据‘;
break;
case ‘c‘:
echo ‘这是第三个li请求的数据‘;
}
?>
标签：clear user ott data function content 个数 span lis
原文地址：http://www.cnblogs.com/xueyunNO1/p/6479486.html
