讓鏈接變爲「活動」而不添加/刪除類別

Question

是否可以在不添加/刪除類的情況下將鏈接更改爲「活動」？我得到的問題是，如果將「a」標籤更改爲「a.active」，那麼我的其他腳本將不起作用。

所以這樣的作品的鏈接，而不是我的其他腳本;（，因爲一類將被添加和刪除

<script> 
    $(function(){ 
     $('.mydiv a').click(function(){ 
      $('.mydiv .active').removeClass('active'); 
      $(this).addClass('active'); 
     }); 
    }); 
</script> 

任何人可以幫助我

更新2。？
，這是我一起工作的腳本： http://jsfiddle.net/7n2d4b44/2/

Answer 1

使用data-* attributes保存數據，不使用類名的數據。您可以使用jQuery .data方法來獲取data- *屬性的值。

var sliding = $('.sliding_div'); 
 
var divWords = $('.sliding_div p'); 
 

 
$('.links a').click(function() { 
 
    //pass .data the name after the `data-` part in the attribute name 
 
    var c = '.' + $(this).data("filter"); // get name to filter classes and make it as a CSS selector 
 
    
 
    divWords.hide().filter(c).show(); // hide all words, 
 
    // filter to get the ones with class like the clicked link 
 
    // show the filtered ones 
 

 
    //You could move this to its own handler 
 
    //$(".links a.close).click(...) 
 
    c === '.close' ? sliding.hide() : sliding.show(); 
 
    // if c is .close show the sliding_div else hide it 
 
    
 
    $(".links .active").removeClass("active"); 
 
    $(this).addClass("active"); 
 
});

.links { 
 
    width: 60px; 
 
    float: left; 
 
} 
 
.sliding_div { 
 
    padding:10px; 
 
    width: 200px; 
 
    float: right; 
 
    background-color:#ccc; 
 
    display:none; 
 
} 
 
.sliding_div div { 
 
    display:none; 
 
} 
 
.active{ 
 
    color:#F00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="links"> 
 
    <a href="#" data-filter='one'>Link 1</a> 
 
    <a href="#" data-filter='two'>Link 2</a> 
 
    <a href="#" data-filter='three'>Link 3</a> 
 
    <a href="#" data-filter='close'>Close</a> 
 
</div> 
 

 
<div class="sliding_div"> 
 
    <p class='one two three'>House</p> 
 
    <p class='one two three'>Cat</p> 
 
    <p class='one'>Dog</p> 
 
    <p class='three'>Car</p> 
 
    <p class='one two'>Man</p> 
 
</div>

Answer 2

你可以使用ŧ他CSS僞類，我認爲這樣的：

a:active { color: lime } 

更多信息CSS :active pseudo-class

Answer 3

的$(this).addClass('active');應追加所以元素應該有2班。其他班級不應該被刪除。你可以仔細檢查。

你的情況，這可能是因爲你的函數訪問其他類不編碼正確

Answer 4

我做了一些變化，但你現在應該可以添加代碼以使用活動類，不擔心這個有點...

CSS

.links { 
    width: 60px; 
    float: left; 
} 
.sliding_div { 
    padding:10px; 
    width: 200px; 
    float: right; 
    background-color:#ccc; 
} 
.sliding_div p { 
    display:none; 
} 

HTML

<div class="links"> 
    <a href="#" data-link='one'>Link 1</a> 
    <a href="#" data-link='two'>Link 2</a> 
    <a href="#" data-link='three'>Link 3</a> 
    <a href="#">Close</a> 
</div> 
<div class="sliding_div"> 
    <p class='one two three'>House</p> 
    <p class='one two three'>Cat</p> 
    <p class='one'>Dog</p> 
    <p class='three'>Car</p> 
    <p class='one two'>Man</p> 
</div> 

的Javascript

var sliding = $(".sliding_div"); 
var divWords = $(".sliding_div p"); 

$(".links a").click(function (e) { 
    e.preventDefault(); 
    divWords.hide(); 
    sliding.find("." + $(this).data("link")).show(); 
}); 

的jsfiddle例如...

http://jsfiddle.net/7n2d4b44/7/