Django Javascript中的活动按钮单击

Question

我想制作按钮，活动并在点击时着色。我正在使用 Django，但我认为 Javascript 是完成这项任务的好主意。有人可以帮忙吗？

html 文件

    <div class="menu_tabs">
    <div class="menu_tabs_title"> </div>
    <a href="/aries" class="btn-skin  ">Daily</a>
    <a href="/aries/love" class="btn-skin ">Loves</a>
    <a href="aries/finance" class="btn-skin ">Financial</a>
    <a href="aries/gambling" class="btn-skin ">Gambling</a>
    <a href="aries/sex" class="btn-skin ">Sexy</a>
    <a href="aries/pets" class="btn-skin ">Pets</a>

css 文件

.btn-skin {
    border-radius: 2px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .15);
    background: #4CAF50;
    color: #fff;
    width: auto;
    padding: 15px;
    transition: background-color 300ms linear;
    font-family: proxima-nova, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    display: inline-block;
    margin: 8px 5px 5px 0;
    font-size: 20px;
    font-family: font2
}

.active, .btn-skin:hover {
    background-color: #666;
    color: white;
}

Answer 1

你可以这样做：

var anchors = document.getElementsByClassName("btn-skin");
for(var i=0; i<anchors.length; i++){
  anchors[i].addEventListener("click", function(e) {
    var current = this;
    for (var i = 0; i < anchors.length; i++) {
      if (current != anchors[i]) {
        anchors[i].classList.remove('active');
      } else if (current.classList.contains('active') === true) {
        current.classList.remove('active');
      } else {
        current.classList.add('active')
      }
    }
    e.preventDefault();
  });
}

.btn-skin {
    border-radius: 2px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .15);
    background: #4CAF50;
    color: #fff;
    width: auto;
    padding: 15px;
    transition: background-color 300ms linear;
    font-family: proxima-nova, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    display: inline-block;
    margin: 8px 5px 5px 0;
    font-size: 20px;
    font-family: font2
}

.active, .btn-skin:hover {
    background-color: #666;
    color: white;
}

<div class="menu_tabs">
<div class="menu_tabs_title"> </div>
<a href="/aries" class="btn-skin  ">Daily</a>
<a href="/aries/love" class="btn-skin ">Loves</a>
<a href="aries/finance" class="btn-skin ">Financial</a>
<a href="aries/gambling" class="btn-skin ">Gambling</a>
<a href="aries/sex" class="btn-skin ">Sexy</a>
<a href="aries/pets" class="btn-skin ">Pets</a>

编辑

这个javascript 应该做你想做的事：

var pathname = window.location.pathname;
var path_arr = pathname.split('/');
var current_tab = path_arr[path_arr.length-1];
var anchors = document.getElementsByClassName("btn-skin");
anchors[0].classList.add('active');
for(var i=0; i<anchors.length; i++){
  var tab_arr = anchors[i].getAttribute("href").split('/');
    var tab_name = tab_arr[tab_arr.length-1];
  if(tab_name == current_tab){
    anchors[0].classList.remove('active');
    anchors[i].classList.add('active');
    break;
  } 
}