Ⅰ js點擊改變當前菜單css樣式
(function($){
$(function(){
$("#menua").each(function(){
$(this).click(function(){
$("#menuli:eq(1)a").removeClass("cur");
});
});
$("#menuli:eq(1)a").click(function(){$(this).addClass("cur")})
});
})(jQuery);
Ⅱ js代碼如何設置css樣式
使用javaScript動態設置CSS樣式有多種方式，以下是八種常見的方法：
直接設置style屬性：
設置CSS屬性：
動態操作style屬性：
使用setProperty函數：
修改class屬性：
使用CSSText屬性：
創建並引入新的CSS樣式文件：
使用addRule、insertRule函數：
開發者可以根據具體需求和場景靈活使用這些方法，以實現網頁元素的動態樣式管理與控制。
Ⅲ js 設置css樣式
javascript改變CSS樣式分為局部和全局，分別如下：一、局部改變樣式有三種方法：直接改變樣式、改變className和改變cssText改變className： document.getElementById('obj').className="…"改變cssText：document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";改變直接樣式： document.getElementById('obj').style.backgroundColor="#003366″二、全局改變樣式通過改變外鏈樣式的的href的值實現網頁樣式的實時切換，也就是"改變模板風格"。首先需要賦予需要改變的目標一個id，如代碼如下:link rel="stylesheet" type="text/css" id="css" href="firefox.css" /調用時很簡單，如代碼如下:span onclick="javascript:document.getElementById('css').href='ie.css'"點我改變樣式/span
Ⅳ 如何用JS或CSS製作網站導航條
給你一個樸素版的導航(包含css和html2部分)：
css.css文件
body{
font-size:12px;
font-family:Arial,
Helvetica,
sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-align:center;
text-decoration:none;
float:left;
width:100px;
padding:3px
5px
0px
5px;
}
a:visited{
color:#336601;
text-align:center;
text-decoration:none;
float:left;
padding:3px
5px
0px
5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding-left:6px;
text-align:center;
width:100px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px
3px
0px
20px;
width:100px;
text-align:center;
text-decoration:none;
background-color:#539D26;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px
5px;
position:absolute;
z-index:1;
left:
198px;
top:
25px;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px
4px
0px
0px;
border:1px
solid
#9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px
0px
0px;
cursor:pointer;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:6px
4px
0px
0px;
background-color:#F5F5F5;
color:#999999;
border:1px
solid
#EEE8DD;
padding:6px
0px
0px
0px;
overflow-y:hidden;
cursor:pointer;
}