javascript를 사용하여 메뉴 색상을 변경하는 방법

일부 효과를 추가하여 정적 측면 메뉴를 좀 더 동적으로 만들려고합니다.javascript를 사용하여 메뉴 색상을 변경하는 방법

아래 코드에서 "첫 번째 제목"과 "두 번째 제목"을 중첩 된 li과 구별하고 싶습니다. 배경색과 특정 텍스트 (빨간색이라고 말하기)를 찾고 이러한 스타일을 영구적으로 유지하려고합니다. 반면 중첩 된 li (A1-B3)에는 배경이 없어야하며 링크가 선택되어 있으면 텍스트가 회색이 아닌 녹색에서 녹색으로 변경되어야합니다.

<ul class="sideNav"> 
<li class="first active"><a>First Heading</a> 
<ul> 
<li class="first"><a>A1</a></li> 
<li><a>A2</a></li> 
<li class="last"><a>A3</a></li> 
</ul> 
</li> 
<li class="last active"><a>Second Heading</a> 
<ul> 
<li class="first"><a>B1</a></li> 
<li><a>B2</a></li> 
<li class="last"><a>B3</a></li> 
</ul> 
</li> 
</ul>

나는 포럼에보고 했어이() 내 요구 사항, JS 내 총 부족과 비슷한 것 같다 동안/JQuery와 지식은 정말 날 방해한다.

모든 지침

을 감상 할 수있다

:: 편집 :

이()하지만 난 (그 이전 링크의 예보다 복잡)을 찾고 있어요 무엇을 닫을 수는 '아무튼 꽤 필요한 코브. 그래서 어떤 도움도 여전히 환영받을 것입니다.

출처

2012-02-09 Billy Squibs

당신은 이미 "js/jquery 지식이 완전히 부족하여 정말 나를 괴롭 히고 있습니다."라는 귀하의 문제를 요약 했으므로 일부 [Javascript] (https : //developer.mozilla)를 배우기 전에 실행하지 마십시오. org/ko/JavaScript)로 이동 한 다음 [jQuery] (http://www.jquery.com)로 이동 한 다음 배운 내용을 [nettuts] (http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/)와 같은 자습서를 따라 문맥에 따라 –

Tom - do과 동의 배우고 배우기. – Lennart

당신은 단지 CSS 사용할 수 있습니다 특정 사물의 색상을 변경하려면

ul.sideNav li a { 
    color: red; 
} 

ul.sideNav li ul li a { 
    color: grey; 
}

출처

2012-02-09 14:04:01 Lennart

을, 당신은 정말 CSS의 조건문을 사용해야합니다.

ul.sideNav:link,li.sideNav:link 
{ 
color:y; 
} 
ul.sideNav:active,ul.sideNav:visited,li.sideNav:visited,li.sideNav:active 
{ 
color:z; 
} 
ul.sideNav:hover,li.sideNave:hover 
{ 
color:x; 
}

당신은 어떤 태그에 다음을 적용 할 수 있습니다 : 내 목록 항목은 마우스를 올리면 X 색상, Y 컬러 기본 및 z 색깔하려는 경우 예를 들어, ... 내 CSS는 다음과 같이 것을 클릭하면 , 앵커()와 같이 사용하기에 다양한 조건이 있습니다. W3Schools에서 HTML, DOM, CSS 및 JavaScript를 읽을 것을 적극 권장합니다.

출처

2012-02-09 14:06:33 Bry6n

W3School을 참조하지 마십시오. http://w3fools.com/ – Lennart

@Lennart W3School의 문제점은 무엇입니까? – Bry6n

오래된 정보 나 잘못된 정보가 많이 있지만 정확한 정보로 표시됩니다. 많은 리소스를 사용할 수 있습니다. http://w3fools.com/#what-should-be-done – Lennart

이 질문에 직접 대답은 아니지만 나는 그것이 OP에 유용 할 것이라고 느끼고 있습니다 잘하면 다른 사람 내가 가장 확실히 귀하의 경우에는 가장 간단하게 CSS를 사용할 수있는 aggree 동안

귀하의 요소를 스타일 (@ lennart의 답변을 참조하십시오 아이 선택의 예를 들어) 스타일을 적용 할 때 더 역동적이어야 할 때가있을 수 있습니다 occasion 때, 물론 jquery의 .css() 및 유사한 기능을 사용하여, 아마도 실제로는 일반 오래된 자바 스크립트를 사용할 수 있습니다 jquery로도 까다롭게 될 수있는 dom traversal로 이어지고, 두 번째 옵션은 동적으로 스타일 시트를 추가하는 것입니다. 또한 매우 효과적 일 수 있습니다. 세 번째 옵션은 스타일 시트를 변경/조작하는 것입니다. 우리가 조금 창조적 수있는 몇 가지 JSON 데이터에 정의 된 스타일을 가지고와 CSS의 문자열을 구축하고 아코디언 스타일로 우리가 설정이 데모 HTML에 <style>

// turn #accordion into a simple accordion menu 
// adds style to the head from json data 
$(document).ready(function() { 

    // hide <ul> nested in accordion 
    $('#accordion').find('ul').hide(); 

    // add click event to accordion .heading 
    $('#accordion').find('.heading').click(function(e) { 
    // do not follow anchor  
    e.preventDefault();  
    // slide up any open sections 
    if(!($(this).hasClass('open'))) { 
     $('.open').removeClass('open').next().slideUp(); 
    } 
    $(this).addClass('open').next().slideToggle(); 
    }); 

    // a function that parses json and 
    // appends it to <style> 
    function addStyleFromJson(json) { 
    // turn json into normal string 
    var style = JSON.stringify(json); 
    // remove apostrophes, colons before {, opening and closing {} 
    style = style.replace(/(")|(:(?=\{))|(^\{)|(\}$)/g, ''); 
    // remove commas after } 
    style = style.replace(/(\}|\;),/g, function($0, $1){ 
    return $1 ? $1 + '' : $0; 
    }); 
    // prepend this style with any style declared in <head> 
    style = $('style').text() + style; 
    // append style element to head 
    $('style').text(style); 
    } 

    // load some style 
    $.ajax({ 
    url: 'http://dl.dropbox.com/u/47426368/somejson.js', 
    dataType: 'jsonp', 
    jsonp: false, 
    jsonpCallback: 'myCallback', 
    cache: true, 
    success: addStyleFromJson 
    }); 
});

이를 추가 할 수 있습니다 예를 들어 <style> 태그, 메뉴를 클릭 한 다음 원격 위치에서 일부 json을로드하고 이것을 <style> 태그로 구문 분석합니다 (이미 있다고 가정).내가 이전에 말했듯이 이것은 최선의 선택이 아닐 수도 있고 많은 옵션이 있습니다. 제 의견에 말했듯이 그것을 사용하기 위해서는이 재료를 반드시 배워야합니다. 자전거를 타거나 수학을하는 것과 다르지 않습니다. 마술 그냥 (열심히) 작업과 헌신 :-),이게 내가 당신이 자바 스크립트가 온 이유 중 하나라고 생각하는 좀 더 동적으로 뭔가를 만드는 데 비교적 간단하게 여러 기술을 사용할 수있는 방법을 보여 주길 바란다.

여기에 demo

출처

2012-02-09 16:20:34

javascript를 사용하여 메뉴 색상을 변경하는 방법

답변

관련 문제