菜單欄基於鏈接。單擊不工作後臺更改

菜單欄是基於鏈接列表。需要更改點擊項目的背景顏色並將其保留。在我的情況下，顏色會在短時間內改變並回到CSS背景。菜單欄基於鏈接。單擊不工作後臺更改

$(function() { 
 
    $(".menu a").bind("click", function() { 
 
    $(".menu a").removeClass("clicked"); 
 
    $(this).addClass("clicked"); 
 
    }); 
 
});

.menu { 
 
    width: auto; 
 
    display: block; 
 
} 
 

 
.menu li { 
 
    display: inline; 
 
} 
 

 
.menu li a { 
 
    border: solid 2px white; 
 
    color: white; 
 
    text-decoration: none; 
 
    background: #a0a0a0; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.menu a.clicked { 
 
    background: #b34a4a; 
 
} 
 

 
.menu { 
 
    width: auto; 
 
    display: block; 
 
} 
 

 
.menu li { 
 
    display: inline; 
 
} 
 

 
.menu li a { 
 
    border: solid 2px white; 
 
    color: white; 
 
    text-decoration: none; 
 
    background: #a0a0a0; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.menu a.clicked { 
 
    background: #b34a4a; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="menu"> 
 
    <ul> 
 
    <li> <a href="">ITEM 1</a> 
 
     <a href="">ITEM 2</a> 
 
     <a href="">ITEM 3</a> 
 
     <a href="">ITEM 4</a> 
 
     <a href="">EXIT</a> 
 
    </li> 
 
    </ul> 
 
</div>

添加鏈接jsfiddle。

來源

2017-07-07 Sergei Mashkov

您缺少的第一件事是菜單元素上的href屬性。當你點擊它們，如果你不把它們至少設置爲「＃」的頁面將重新加載，所以他們不會有類「點擊」

第二件事，我寫了不同的JS給你

$(function(){ $(".menu a").click(function() { 
    $(".menu a").removeClass("clicked"); 
    $(this).addClass("clicked"); 
    }); 
})

來源

2017-07-07 20:45:27

Daniele謝謝你的回答。所以如果我在參考中設置＃，鏈接將無法工作。這是一個例子。在真正的菜單欄中，我用PHP腳本獲得了href。像 href =「script1.php」並且每個腳本都以上面提到的標題開始。每次點擊php腳本運行並重新加載菜單欄。那麼錯誤的方式來改變點擊項目的背景？ –

是的。如果你想設置一個活動類（「點擊」類），你應該在新頁面加載後設置它。有很多方法可以做到這一點，客戶端或服務器端 –

菜單欄基於鏈接。單擊不工作後臺更改

回答

相關問題