Question

我正在尝试将这两个代码组合在一起：

我希望用户点击该链接并重定向到具有所选背景颜色的网站
如果用户想要再次更改颜色，则从该页面内部重新加载整个页面

有没有办法可以更快地加载它或者使用我使用的旧代码？

<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

我对您的代码进行了细微更改，以实现您的目标。检查并尝试以下代码：

＆＃13;

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

＆＃13;

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

＆＃13;

<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>

＆＃13;

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'));
    }
  });
});

点击后更改背景并有链接

2 个答案: