1、建立一个静态页命名为change.html ,标题为js导航点击的怎么同时变图片跟字体颜色。
2、设置一个简易的导航栏。
3、加css 控制菜单的样式,并加入背景图片。
4、为li添加id,创建函数fun ,并传递传递参数。
5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)"
6、加入改变文字大小的代码
element.style.color="black"
//修改文字大小
element.style.fontSize="18px"
7、然后就完成了。
你这代码不全啊td不能单独使用,<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span width="722" style="background-color: red"><!--#begineditable contype="" name="网站导航" action="" layout="" clone="0" namechanged="0" order="0" ispublic="0" tagname="网站导航" viewid="16588" stylesysid=""-->elementname<!--#endeditable--></span>
</body>
<!--//td需要配合tr使用不然页面不识别TD元素没办法 *** 作-->
<!--<table border="1">-->
<!--<tr>-->
<!--<th>Month</th>-->
<!--<th>Savings</th>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>January</td>-->
<!--<td>$100</td>-->
<!--</tr>-->
<!--</table>-->
</html>
<head><title></title>
<style type="text/css">
#u1
{
float:left
background-color:rgba(180,180,180,0.6)
}
li
{
width:84px
list-style-type:none
float:left
font-size:20px
font-weight:bold
}
.style1
{
background-color:Blue
}
.style2{background-color:white}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("li").mousemove(function () {
$(this).addClass("style1").mouseout(function () {
$(this).removeClass("style1")
})
})
})
</script>
</head>
<body>
<ul id="u1">
<li>首页</li>&nbsp
<li>产品中心</li>&nbsp
<li>新闻中心</li>&nbsp
<li>咨询投诉</li>&nbsp
<li>关于我们</li>
</ul>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)