js和css特效
要求：TAG效果，当指向某一标签时，显示相应内容，标签应包括当前和非当前样式，如图标签文字有链接，点击是链接加粗...
要求：TAG效果，当指向某一标签时，显示相应内容，标签应包括当前和非当前样式，如图
标签文字有链接，点击是链接加粗 展开
标签文字有链接，点击是链接加粗 展开
3个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jsTest.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/庆祥html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript">
function mouseonshanghai(){
$("shanghai").style.display = "block";$("beijing").style.display = "none";
$("changsha").style.display = "none";$("guangzhou").style.display = "none";
}
function mouseonbeijing(){
$("shanghai").style.display = "none";$("beijing").style.display = "block";
$("changsha").style.display = "none";$("guangzhou").style.display = "none";
}
function mouseonchangsha(){
$("shanghai").style.display = "none";$("beijing").style.display = "none";
$("changsha").style.display = "block";$("guangzhou").style.display = "none";
}
function mouseonguangzhou(){
$("shanghai").style.display = "none"誉饥搏;$("beijing").style.display = "none";
$("changsha").style.display = "none";$("guangzhou").style.display = "block";
}
function mouseonshanghaiclick(){
$("shh").style.font=900;$("bj").style.font=100;
$("chs").style.font=100;$("gzh").style.font=100;
}
function mouseonbeijingclick(){
document.getElementById("bj").style.font=900;
}
function mouseonchangshaclick(){
$("chs").style.font=900;
}
function mouseonguangzhouclick(){
$("gzh").style.font=900;
}
function $(id){
return document.getElementById(id);
}
</script>
<body onload="mouseonshanghai();">
<table width="25%" height="50" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="32"><肢郑div align="center" onmousemove="mouseonshanghai();"><a href="#" id="shh" onclick="mouseonshanghaiclick();">上海</a></div></td>
<td><div align="center" onmousemove="mouseonbeijing();"><a href="#" id="bj" onclick="mouseonbeijingclick();">北京</a></div></td>
<td><div align="center" onmousemove="mouseonchangsha();"><a href="#" id="chs" onclick="mouseonchangshaclick();">长沙</a></div></td>
<td><div align="center" onmousemove="mouseonguangzhou();"><a href="#" id="gzh" onclick="mouseonguangzhouclick();">广州</a></div></td>
</tr>
<tr>
<td colspan="4">
<center>
<div id="shanghai" style="display:none;font-size: 40;font-family: 华文行楷;">上海的车子</div>
<div id="beijing" style="display:none;font-size: 40;font-family: 华文行楷">北京的车子</div>
<div id="changsha" style="display:none;font-size: 40;font-family: 华文行楷">长沙的车子</div>
<div id="guangzhou" style="display:none;font-size: 40;font-family: 华文行楷">广州的车子</div>
</center>
</td>
</tr>
</table>
</body>
</html>
FileZilla
地址：vip55.1111.cn
用户名：webmaster@vip5.2423.cn
密码：d7e6r5f5e4w
<html>
<head>
<title>jsTest.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/庆祥html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript">
function mouseonshanghai(){
$("shanghai").style.display = "block";$("beijing").style.display = "none";
$("changsha").style.display = "none";$("guangzhou").style.display = "none";
}
function mouseonbeijing(){
$("shanghai").style.display = "none";$("beijing").style.display = "block";
$("changsha").style.display = "none";$("guangzhou").style.display = "none";
}
function mouseonchangsha(){
$("shanghai").style.display = "none";$("beijing").style.display = "none";
$("changsha").style.display = "block";$("guangzhou").style.display = "none";
}
function mouseonguangzhou(){
$("shanghai").style.display = "none"誉饥搏;$("beijing").style.display = "none";
$("changsha").style.display = "none";$("guangzhou").style.display = "block";
}
function mouseonshanghaiclick(){
$("shh").style.font=900;$("bj").style.font=100;
$("chs").style.font=100;$("gzh").style.font=100;
}
function mouseonbeijingclick(){
document.getElementById("bj").style.font=900;
}
function mouseonchangshaclick(){
$("chs").style.font=900;
}
function mouseonguangzhouclick(){
$("gzh").style.font=900;
}
function $(id){
return document.getElementById(id);
}
</script>
<body onload="mouseonshanghai();">
<table width="25%" height="50" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="32"><肢郑div align="center" onmousemove="mouseonshanghai();"><a href="#" id="shh" onclick="mouseonshanghaiclick();">上海</a></div></td>
<td><div align="center" onmousemove="mouseonbeijing();"><a href="#" id="bj" onclick="mouseonbeijingclick();">北京</a></div></td>
<td><div align="center" onmousemove="mouseonchangsha();"><a href="#" id="chs" onclick="mouseonchangshaclick();">长沙</a></div></td>
<td><div align="center" onmousemove="mouseonguangzhou();"><a href="#" id="gzh" onclick="mouseonguangzhouclick();">广州</a></div></td>
</tr>
<tr>
<td colspan="4">
<center>
<div id="shanghai" style="display:none;font-size: 40;font-family: 华文行楷;">上海的车子</div>
<div id="beijing" style="display:none;font-size: 40;font-family: 华文行楷">北京的车子</div>
<div id="changsha" style="display:none;font-size: 40;font-family: 华文行楷">长沙的车子</div>
<div id="guangzhou" style="display:none;font-size: 40;font-family: 华文行楷">广州的车子</div>
</center>
</td>
</tr>
</table>
</body>
</html>
FileZilla
地址：vip55.1111.cn
用户名：webmaster@vip5.2423.cn
密码：d7e6r5f5e4w
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.a1{
font-size:12px;}
.a2{
font-size:12px;
font-weight:bold;}
</style>
<body>
<script type="text/JavaScript">
<!--
function showtable(x)
{
for(h=1;h<3;h++){
document.getElementById("table"+h).style.display="none"
document.getElementById("table"+x).style.display=""
document.getElementById("c"+h).className='a1'
document.getElementById("嫌高c"+x).className='a2'
}
}
//-->
</script>
<table width="200" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
<tr>
<td align="center" bgcolor="#FFFFFF" class="a2" id="c1" style="cursor:hand;" onmouseover="javascript:showtable(1)">栏目1</td>
<td align="center" bgcolor="#FFFFFF" class="a1" id="c2" style="cursor:hand;" onmouseover="javascript:showtable(2)">栏目2</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td><font color="red">栏目1的罩裂内容</font></td>
</tr>
</table>
<table width="100%"芹闷尺 border="0" cellspacing="0" cellpadding="0" id="table2" style="display:none;">
<tr>
<td><font color="blue">栏目2的内容</font></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
.a1{
font-size:12px;}
.a2{
font-size:12px;
font-weight:bold;}
</style>
<body>
<script type="text/JavaScript">
<!--
function showtable(x)
{
for(h=1;h<3;h++){
document.getElementById("table"+h).style.display="none"
document.getElementById("table"+x).style.display=""
document.getElementById("c"+h).className='a1'
document.getElementById("嫌高c"+x).className='a2'
}
}
//-->
</script>
<table width="200" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
<tr>
<td align="center" bgcolor="#FFFFFF" class="a2" id="c1" style="cursor:hand;" onmouseover="javascript:showtable(1)">栏目1</td>
<td align="center" bgcolor="#FFFFFF" class="a1" id="c2" style="cursor:hand;" onmouseover="javascript:showtable(2)">栏目2</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td><font color="red">栏目1的罩裂内容</font></td>
</tr>
</table>
<table width="100%"芹闷尺 border="0" cellspacing="0" cellpadding="0" id="table2" style="display:none;">
<tr>
<td><font color="blue">栏目2的内容</font></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
document.getElementById("table").style.display="手腊none"隐藏
document.getElementById("橘陪table"圆薯蠢).style.display="block"显示
document.getElementById("橘陪table"圆薯蠢).style.display="block"显示
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
