怎样动态设置导航栏被选中的当前样式

代码注释

!important 可以提升指定样式规则的应用优先权

width:111px!important 整个菜单的宽度

width:80px!important 菜单连接的宽度

top:234px整个菜单的位置,即距顶部距离为234px

height:222px!important可以根据需要自己调节高度

line-height:15px!important与height:15px!important 是对应的,也可以根需要自己需要设置菜单与菜单之间的位置排列规则

1、新建一个html代码页面。

2、创建一个input按钮标签，然后给这个按钮添加一个changeBg()的点击事件。

代码：<input type="button"   value="点击切换背景色" onclick="changeBg()"/>

3、创建style标签，然后创建一个class类为btn用于设置按钮样式，其中按钮的背景设置background-color:#009F95!important

代码：

<style type="text/css">

.btn{

border:1pxsolid#ddd

padding:5px8px

background-color:#009F95!important

}

</style>

4、给按钮input标签添加class="btn"。

代码：<input type="button" class="btn"  value="点击切换背景色" onclick="changeBg()"/>

5、引入jquery库，然后新建一个script标签，在这个标签里为changeBg()点击事件添加修改按钮的背景色。

changeBg()修改背景色代码：

functionchangeBg(){

$(".btn").css("cssText","background-color:red!important")

}

6、保存html代码页面后使用浏览器打开，点击按钮后发现按钮背景色被修改为红色。

---