CODEWITHSUNDEEP
javascriptjquery
Edoras
Edoras

Reputation: 127

AddClass "active" where Class is same as href, otherwise remove "active"

I'm doing probably something wrong, if I will click on <a> tag with class "sw" and href="#m1", I need remove class "active" from all <a> and <div> tags with class "sw", but also I need add "active" to all rest <a> and <div> tags with class which is same as href in <a> link, where I am clicking.

Thats mean, I need remove hash from href, because I am looking for that class not ID.

for example:

<a href="#m1" class="sw">CL1<a/>
<a href="#m2" class="sw active">CL2<a/>
<div class="sw m1>HELLO1</div>
<div class="sw m2 active>HELLO2</div>

if I will click on CL1, then I need remove all active from all sw divs and a, but also I need addclass "active" to all divs and a where is #m1 as class.

I hope u will underestand me :(

Here is my 2 testing codes ... 

$('a.sw').on('click', function() { 
    var nohash = $(this).attr('href').replace('#', '');
    if ( !$( this ).hasClass( "active" ) ) {
        $('.sw').each(function() { 
            if($(this).hasClass('active')) { 
                $(this).removeClass('active');
            } else { 
                nohash.addClass('active');
            }
        });
    }
});

$( 'a.sw' ).on( 'click', function() {
   $('div.sw').removeClass( 'active' );
   $(this).href().replace('#', '').addClass( 'active' )
});

Upvotes: 2

Views: 405

Answers (3)

Luke Becker
Luke Becker

Reputation: 894

I've added this plunker of a working example. I've modified your code a tad, but this should work for you. Let me know if you have any questions:

http://plnkr.co/edit/BQXXGd6IXPg2mCxqzFJv?p=preview

/ Code goes here

/ Code goes here
$(function(){
  $('a.sw').on('click', function() { 
    var nohash = $(this).attr('href').replace('#', '');
    var $nohashElement = $('.' + nohash);
    console.log($nohashElement);
    $('.sw').removeClass('active');
    $(this).addClass('active');
    $nohashElement.addClass("active");
  });
});

Upvotes: 0

Erik Philips
Erik Philips

Reputation: 54656

Take moment and read Decoupling Your HTML, CSS, and JavaScript - Philip Walton @ Google

Based on your current code, you have a very high degree of coupling and virtually no reuse of your code. Here is how I would refactor it:

html:

<a href="#m1" class="js-sw active" data-sw-target=".sw-target-m1">CL1</a>
<a href="#m2" class="js-sw" data-sw-target=".sw-target-m2">CL2</a>
<div class="sw-target sw-target-m1 active">HELLO1</div>
<div class="sw-target sw-target-m2">HELLO2</div>

Javascript:

$(document).ready(function() {
  $('.js-sw').on('click', function() {
    $('.sw-target, .js-sw').removeClass('active');

    $(this).addClass('active');
    var selector = $(this).data('sw-target');
    $(selector).addClass('active');
  });
});

Now the code works for anything marked as .js-sw. You can change the target selector to whatever you want including multiple selectors (ex. data-sw-target=".sw-target, .someothertarget").

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You've dome typos like <a/> should be </a> and missing quotes in :

<div class="sw m1> 
_________________^
<div class="sw m2 active>
________________________^

Should be :

<div class="sw m1">
<div class="sw m2 active">

If I understand you well your desired result after clicking CL1 should be like :

<a href="m1" class="sw active">CL1</a>
<a href="#m2" class="sw">CL2</a>
<div class="sw m1 active">HELLO1</div>
<div class="sw m2">HELLO2</div>

Check example below, hope this helps. 

$('a.sw').on('click', function(e) { 
    e.preventDefault();
  
    var new_href = $(this).attr('href').replace('#', '');
    $(this).attr( 'href' , new_href ); //Remove '#' from href
  
    $('.sw').removeClass('active');
    $('.'+new_href).addClass('active');
    $(this).addClass('active');
});
.active{
   color: green;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#m1" class="sw">CL1</a>
<a href="#m2" class="sw active">CL2</a>
<div class="sw m1">HELLO1</div>
<div class="sw m2 active">HELLO2</div>

Upvotes: 0

Related Questions