更改背景，並已鏈接

Question

我想這兩個代碼合併：

1. 我希望用戶點擊鏈接和被重定向到一個位點上的選擇背景顏色
2. 從內該頁面現在它重新加載整個頁面，如果用戶想要再次更改顏色

有沒有一種方法，我可以加載它更快或有我正在使用的舊代碼結合？

<div class="box1">  
<ul id="bgbg"> 
    <li id="bg1"><a href="www.example.com#red"></a> </li> 
    <li id="bg2"><a href="www.example.com#blue"></a> </li> 
    <li id="bg3"><a href="www.example.com#green"></a> </li 
</ul></div> 


jQuery(document).ready(function() { 
var matchColors = ["red", "green", "blue"]; 
var color = window.location.hash.slice(1); 
if (matchColors.indexOf(color) != -1){ 
    jQuery('body').addClass(color); 
} 
}); 

的老代碼：

jQuery(document).ready(function() {  
jQuery("#bgbg > li").click(function() {  
jQuery('body').removeClass('bg1 bg2 bg3');  
jQuery('body').addClass(jQuery(this).attr('id')) ; });}); 

但是，我不得不刪除它，因爲我不能鏈接背景。

有什麼想法嗎？

Answer 1

我對你的代碼做了小的修改，以實現你正在尋找的東西。檢查並嘗試下面的代碼：

$(".colorSelector a").on('click', function() { 
 
    var colorSelected = $(this).data('color'); 
 
    $('body').removeAttr('class').addClass(colorSelected); 
 
    return false; 
 
});

.red { 
 
    background-color: red; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box1"> 
 
    <ul id="bgbg" class="colorSelector"> 
 
    <li id="bg1"> 
 
     <a href="www.example.com#red" data-color='red'>red</a> 
 
    </li> 
 
    <li id="bg2"> 
 
     <a href="www.example.com#blue" data-color='blue'>blue</a> 
 
    </li> 
 
    <li id="bg3"> 
 
     <a href="www.example.com#green" data-color='green'>green</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

您可以檢查當前的URL路徑是一樣的點擊URL路徑。如果它們相同，則可以應用您的添加類jQuery。您檢查URLS哈希值的jquery可以坐在您的$(document).ready之內，以便在頁面被訪問時觸發。我已將列表ID更改爲顏色以使代碼更簡單，但對Milan Chheda概述的單擊事件使用數據屬性方法可能更好。

我不能做一個工作的例子，因爲它需要你重定向到另一個頁面，所以你需要檢查它的結局。

CSS

.red { 
    background-color: red; 
} 

.blue { 
    background-color: blue; 
} 

.green { 
    background-color: green; 
} 

HTML

<div class="box1"> 
    <ul id="bgbg" class="colorSelector"> 
    <li id="red"> 
     <a href="www.example.com#red">red</a> 
    </li> 
    <li id="blue"> 
     <a href="www.example.com#blue">blue</a> 
    </li> 
    <li id="green"> 
     <a href="www.example.com#green">green</a> 
    </li> 
    </ul> 
</div> 

jQuery的

$(document).ready(function(){ 
    // add class to body on page load depending on link hash 
    var matchColors = ["red", "green", "blue"]; 
    var color = window.location.hash.slice(1); 
    if (matchColors.indexOf(color) != -1){ 
    $('body').addClass(color); 
    } 
    // add class to body based on list items ID 
    $("#bgbg > li").click(function() { 
    // get current URLs relative path exluding hash 
    var currentURL = window.location.pathname; 
    // get clicked links relative URL path exluding hash 
    var linkURL = $(this).find('a')[0].pathname; 
    // check if the clicked link URL path is the same as the current URL path 
    if(currentURL == linkURL) { 
     // apply relevent classes 
     $('body').removeClass('red blue green'); 
     $('body').addClass(jQuery(this).attr('id')); 
    } 
    }); 
});