㈠ jquery如何做導航菜單欄點擊更換背景色（防刷新）
刷新是防止不了的，最多隻是js限制按F5刷新 ，瀏覽器的刷新按鈕限制內不了，如果你是要刷新容後按鈕當前更換的背景顏色還在 那就用cookie存儲起來，在讀取出來設置給對應的按鈕顏色，不然就和後台交互傳遞參數 通過參數來判斷給什麼按鈕設置顏色
㈡ JS或Jquery動態改變導航欄樣式
簡單的插件代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動態導航插件</title>
<style type="text/css">
<!--
body, td, th {
font-size: 14px;
background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/*導航默認樣式，可根據實際情況修改*/
* {
margin:0;
padding:0
}
.nav {
width:980px;
height:30px;
left:50%;
margin-left:-490px;
list-style:none;
position:relative;
}
.nav li {
display:inline-block;
margin:0 3px;
position:relative;
overflow:hidden;
height:30px; /*建議此高度大於等於裡面的a標簽高度*/
float:left;
}
.nav li span {
display:inline-block;
overflow:hidden
}
.nav li a {
text-decoration:none;
outline:none;
color:#666;
display:inline-block;
padding:0 10px;
text-align:center;
background-color: #E1E1E1;
font-weight:bold;
height:30px;
line-height:30px;
}
/*滑鼠經過時樣式*/
.nav li a.over {
background-color:#666;
color:#FFF
}
-->
</style>
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.dynamicNav=function(options){
//默認配置
var defaults = {
direction:"up", //動畫切換方向，總共4種up 、down 、left 、right
ration:100 //三種預定速度之一的字元串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
};
// 覆蓋默認配置
var opts = $.extend(defaults, options);
this.each(function(){
var navList=$(this).find("li"),
navLink=navList.find("a");
//在a標簽外側插入span
navList.wrapInner("<span></span>");
var span=navLink.parent();
//判斷是否垂直切換
if(opts.direction=="up" || opts.direction=="down"){
var v=true;
}
//判斷是否改變span初始位置及a樣式
if(opts.direction=="right" || opts.direction=="down"){
var restSpan=true;
}
navLink.each(function(){
//獲取a高度和寬度
var w=$(this).outerWidth(),
p=$(this).parent();
//初始復制現有a標簽
$(this).clone().appendTo(p).addClass("over");
//如果是垂直切換
if(v){
p.css("width",w);
}else{
p.css("width",2*w).parent().css("width",w);
}
});
//如果向右或向下切換，改變span初始位置及a樣式
if(restSpan){
span.each(function(){
if(opts.direction=="right"){
$(this).css({"margin-left":-$(this).outerWidth()/2});
}
if(opts.direction=="down"){
$(this).css({"margin-top" : -$(this).outerHeight()/2});
}
$(this)
.find('a')
.last()
.removeClass("over")
.prev()
.addClass("over");
});
}
//滑鼠經過時動畫函數
function over(o){
o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.ration);
}
//滑鼠移開時動畫函數
function out(o){
o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.ration);
}
//滑鼠經過和離開
span.hover(function(){
restSpan ? out($(this)) : over($(this));
},function(){
restSpan ? over($(this)) : out($(this));
});
});
};
})(jQuery);
$(function(){
//向左
$("#nav1").dynamicNav({
direction:"left", //動畫切換方向，總共4種up 、down 、left 、right
ration:300 //三種預定速度之一的字元串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
});
//向右
$("#nav2").dynamicNav({
direction:"right",
ration:200
});
//向上
$("#nav3").dynamicNav({
direction:"up",
ration:100
});
//向下
$("#nav4").dynamicNav({
direction:"down",
ration:400
});
});
</script>
</head>
<body>
<h1>向左（速度300毫秒）</h1>
<ul class="nav" id="nav1">
<li><a href="http://www.muzilei.com/">首頁</a></li>
<li><a href="http://www.muzilei.com/">前端技術</a></li>
<li><a href="http://www.muzilei.com/">視覺設計</a></li>
<li><a href="http://www.muzilei.com/">文章歸檔</a></li>
<li><a href="http://www.muzilei.com/">工具/書籍</a></li>
<li><a href="http://www.muzilei.com/">關於我</a></li>
</ul>
<h1>向右（速度200毫秒）</h1>
<ul class="nav" id="nav2">
<li><a href="http://www.muzilei.com/">首頁</a></li>
<li><a href="http://www.muzilei.com/">前端技術</a></li>
<li><a href="http://www.muzilei.com/">視覺設計</a></li>
<li><a href="http://www.muzilei.com/">文章歸檔</a></li>
<li><a href="http://www.muzilei.com/">工具/書籍</a></li>
<li><a href="http://www.muzilei.com/">關於我</a></li>
</ul>
<h1>向上（速度100毫秒）</h1>
<ul class="nav" id="nav3">
<li><a href="http://www.muzilei.com/">首頁</a></li>
<li><a href="http://www.muzilei.com/">前端技術</a></li>
<li><a href="http://www.muzilei.com/">視覺設計</a></li>
<li><a href="http://www.muzilei.com/">文章歸檔</a></li>
<li><a href="http://www.muzilei.com/">工具/書籍</a></li>
<li><a href="http://www.muzilei.com/">關於我</a></li>
</ul>
<h1>向下（速度400毫秒）</h1>
<ul class="nav" id="nav4">
<li><a href="http://www.muzilei.com/">首頁</a></li>
<li><a href="http://www.muzilei.com/">前端技術</a></li>
<li><a href="http://www.muzilei.com/">視覺設計</a></li>
<li><a href="http://www.muzilei.com/">文章歸檔</a></li>
<li><a href="http://www.muzilei.com/">工具/書籍</a></li>
<li><a href="http://www.muzilei.com/">關於我</a></li>
</ul>
</body>
</html>
㈢ 用JS實現導航欄欄目點擊後，被點擊後的欄目字體顏色作改變
varmenu=document.getElementById('menu');
varlinks=menu.getElementsByTagName('a');
for(vari=0;i<links.length;i++){
links[i].onclick=function(){
for(varj=0;j<links.length;j++){
if(links[j]==this){
this.style.color='red';
}else{
links[j].style.color='';
}
}
}
}點擊鏈接之後會刷新頁面。改了顏色換了頁之後也內不會有效容果啊。
㈣ 導航菜單 訪問後 改變對應菜單頁面的菜單背景色 js實現
給他加個點擊事件就可以了啊。點擊過後的文字顏色變紅，首頁的背景顏色再變回原來的顏色就行了。
寫個方法點擊事件載入就行了。
覺得不好的話，給 a 寫個樣式吧。a:hover{......};
㈤ JS點擊變色的問題
$(document).ready(function onClickColor(td) {
if (td.style.backgroundColor != '')
{
td.style.backgroundColor = '';
td.style.color = '';
}
else
{
td.style.backgroundColor = '#FFFF99';
td.style.color = '#0600FF';
}
});
<table class="sortable" onclick="onClickColor(this);" style="cursor:move">
㈥ js寫導航欄hover效果
js寫導航欄hover效果每個js定時器產生時肢梁腔會被系統分配一個id，這個id是正整數，而且一個頁面裡面的定時器id不重復，我們能用一個變數接收這個id，但是如果重復執行一條接收創建語句，那麼你只能接收到最新創建的定時器的id，之前創建的定時器的id會歷衫被覆蓋，但是定時器數量在增加，這就會導致界面一些功能錯渣坦亂，解決方法就是在重復按開始按鈕時，如果已經有了一個定時器那麼就不執行語句，我列出了錯誤代碼和三種解決方法，可以解決定時器重復創建問題。
㈦ 怎樣用js改變點擊菜單的樣式
// 當點擊li菜單時
$("li").click(function(){
// 緩存當前點擊的li對象
var $this = $(this);
// 獲取當前對象是否包含執行的class樣式
var thisCss = $this.hasClass("class名");
// 如果當前對象存在class樣式（可以理解為當前為選中狀態）
if(thisCss){
// 去掉當前樣式（未選中）
$this.removeClass("class名");
}else{// 如果不存在某樣式
// 添加樣式
$this.addClass("class名");
}
})