在 Django Javascript 中单击活动按钮

Question

I want to make button, active and colorized when clicked. I am using Django , but i think Javascript is good idea for this task. Can any one help?

html file

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

.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

You can do:

 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>

Edit

This javascript should do what you want:

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