html css js导航点击菜单后自动改变背景颜色

html css js导航点击菜单后自动改变背景颜色,第1张

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6996661.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存