jquery와 CSS를 사용하여 활성화 된 링크를 표시하려면 두 링크 사이에서 배경색을 전환하십시오.

Question

(Jquery) 저는 각 페이지로 링크를 사용하여 앞뒤로 (표시 및 숨기기) 전환하는 두 개의 div가 있습니다. 클릭 한 링크를 강조 표시된 배경색으로 변경하고 다른 링크를 클릭하면 강조 표시되고 이전은 정상으로 돌아갑니다.

div에 대한 링크 코드를 CSS에 적용하려면 전환 코드를 다시 작성해 보았습니다.하지만 알아낼 수는 없습니다.

누구나 아이디어가 있다면 감사하게 생각합니다. 고맙습니다.

Answer 1

<a href="link1" class="theLinkClass" id="currentLink">Link 1</a> 
<a href="link2" class="theLinkClass">Link 2</a> 

이 단축 될 수있다 . 의 말을하자

....

<div class="myLinks"> 
    <a href="link1" class="currentLink">Link 1</a> 
    <a href="link2">Link 2</a> 
</div> 

CSS

.currentLink{ 
    background-color: #FF0000; 
} 

jQuery를

$(document).ready(function(){ 

    $('.mylinks a').click(function(){ 

     $('.mylinks a').removeClass('currentLink').filter(this).addClass('currentLink'); 

    }); 

}); 

두 예제의 후자는 jQuery의 체인 능력을 활용합니다. 희망이 도움이!

Answer 2

두 가지를 모두 선택하고 선택한 클래스 중 하나에 만 클래스를 적용하려는 코드가 필요합니다.

$('div.togglers').click(function() { 
    $('div.togglers').removeClass('selected').filter(this).addClass('selected'); 
}); 

그런 다음 두 개의 별도 CSS 규칙 만 있으면됩니다.

#currentLink { 
    background-color: #FFCCCC; 
} 

그런 다음 CSS를 당신의 jQuery를

$(document).ready(function(){ 

    $('.theLinkClass').click(function(){ 

     $('.theLinkClass').attr('id',''); 
     $(this).attr('id','currentLink'); 

    }); 

}); 

당신은 클래스 또는 ID입니다 jQuery 코드와 사업부에 링크가있는 경우에 다음

div.togglers { 
    background-color: white; 
} 
div.togglers.selected { 
    background-color: red; 
} 

Answer 3

는 강조 표시를 할 CSS를 설정하고 당신을 위해 전환 :

.First .ShowFirst { border: 1px solid #000; } 
.First .SecondContent { display: none; } 
.Second .ShowSecond { border: 1px solid #000; } 
.Second .FirstContent { display: none; } 

자바 스크립트를 부모의 클래스 이름을 변경 클릭 이벤트를 바인딩 :

$(function() { 
    $('.ShowFirst').Click(function(){ 
    $('#Parent').attr('className', 'First'); 
    return false; 
    }); 
    $('.ShowSecond').Click(function(){ 
    $('#Parent').attr('className', 'Second'); 
    return false; 
    }); 
}); 

부모의 클래스 이름 어떤 링크가 강조 표시되고 어떤 내용이 표시되는지 결정합니다. 여기에 첫 번째 내용은 처음부터 표시됩니다 : (.. 로딩이 완료되면 컨텐츠 된 div의 하나는 처음부터 볼 수 있습니다 그것을로드하는 동안 두 내용을 표시하고 하나를 숨기지 않습니다 보너스로)

<div id="Parent" class="First"> 
    <a class="ShowFirst" href="#">Show first</a> 
    <a class="ShowSecond" href="#">Show second</a> 
    <div class="FirstContent">1</div> 
    <div class="SecondContent">2</div> 
</div>