2013-07-13 5 views
-1

편집에 적용되는 모든 CSS 규칙을 무시하는 방법이 있나요? 편집 : 클릭 한 링크의 색상을 변경하고 탐색 막대의 다른 링크를 클릭 할 때까지 그 색상을 유지하는 방법이 있습니까? 누구든지 하드 코드 된 자바 스크립트 코드를 제공하고 클릭 된 활성 링크의 색상을 변경할 수 있습니까?<a> 태그

편집 : Chrome 브라우저에서 요소를 검사하고 요소를 검사하고 스타일 섹션을 보면 클릭 한 링크와 활성 링크를 흰색으로 강제 설정하는 CSS가 없습니다. 거기에 자바 스크립트 코드가 있는지 확인하는 방법이 있나요? 나는 자바 스크립트 코드를 많이 모른다. 그래서 나는 무엇을 찾아야할지 모른다. 또한 Chrome DevTools를 사용하는 요소에서 어떻게 강제로 활성화 할 수 있습니까?

기본적으로 온라인 웹 사이트 템플릿을 구입하여 코드를 가지고 있습니다. 템플릿은 많은 파일을 가지고 있으며 아주 자바 스크립트 기반입니다. 따라서 탐색 바에서 링크를 클릭하면 웹 페이지가 변경되지 않고 레이아웃이 변경되고 웹 링크가 변경됩니다 (site.com/index에서 site.com/contacts로 변경됩니다).하지만 실제 웹 페이지는 변경되지 않습니다. 또한 탐색 모음의 링크는 모두 녹색이며 링크를 클릭하면 활성 링크가 흰색으로 빛나고 다른 모든 링크는 녹색으로 표시됩니다. 코드의이 부분은 그래서 나는 단지 태그에 적용하고 단지

a:avtive { 
    color: red; 
} 

을 모든 CSS 규칙을 무시하는 방법 내가

a:active { 
    color: red !important; 
} 
을 시도 않았다가있는 경우입니다 궁금 어디 있는지 찾을 수 없습니다

하지만 작동하지 않아 아무 것도하지 않았습니다.

지금까지 내 코드는 내가 의심 요식 JS에 하드 코딩 색상을 설정하지 않는 한 당신만큼 당신의 CSS가 CSS 다음에 오는만큼 그들을 무시할 수, 그리고해야

<nav class="menuL"> 
<ul id="menu"> 
<li><a href="#!/page_about"><span></span>biography</a></li> 
<li><a href="#!/page_portfolio" id="portmenu"><span></span>portfolio</a></li> 
<ul id="submenu"> 
    <li class="subclass" id="first"><a href="#!/page_wine">Wine</a></li> 
    <li class="subclass" id="second"><a href="#!/page_landscape">Landscape</a></li> 
    <li class="subclass" id="third"><a href="#!/page_divers">Divers</a></li> 
</ul> 
</ul> 
</nav> 
<nav class="menuR"> 
<ul id="menu2"> 
<li><a href="#!/page_galleries"><span></span>galleries</a></li> 
<li><a href="#!/page_contacts"><span></span>contact</a></li> 
</ul> 
</nav> 
+0

무엇인지 알아낼 수있는 경우 기본 CSS를 넣을 수 있습니다. http://stackoverflow.com/questions/32875/browsers -default-css-stylesheets – aug

+0

정말로 사용 하시겠습니까 : 활성?이것은 링크를 클릭하는 순간입니다. 또한 링크가 : hover 및 : visited가 있습니다. –

+0

@Andy G 기다려, 안 그래 : 활성 기본적으로 다른 링크를 클릭 할 때까지 클릭 한 링크? 그래서 : 활성 {color : red} 탐색 막대의 다른 링크가 오른쪽으로 클릭 될 때까지 링크가 빨간색으로 유지됩니까? – user216485

답변

1

업데이트의 jQuery 솔루션 : 다음

$(document).ready(function() { 
    $('nav a').click(function() { 
    $(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor'); 
    $(this).addClass('activeAnchor'); 
    }); 
}); 

당신은 클래스, 예를 들어, 몇 가지 CSS를 필요

a.activeAnchor { 
    color:red; 
} 

그래서 헤더에 다음이 필요합니다

<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="http://link-to-your-jquery-script.js" type="text/javascript"></script> 
    <link href="link-to-your-style.css" rel="stylesheet" type="text/css" /> 
</head> 
+0

이 코드는 JS에서 하드 코딩되었지만 어쩌면 선택의 여지가 없습니다. 개인적으로 jQuery 또는 JS에서 사이트의 전체 스타일을 작성하기 전에 차라리 죽을 것입니다. – Robert

+0

그래서 jQuery에서 사이트의 전체 스타일을 작성하지 마십시오. – CompanyDroneFromSector7G

+0

"이 코드는 하드 코딩되지 않았습니다." – Robert

0

입니다 !이

+0

JS에서 하드 코딩 된 색상을 설정한다고 생각합니다. CS를 맨 아래로 이동하려고 시도했지만 작동하지 않았습니다. 나는 그것을 맨 위로 옮겼지만, 여전히 효과가 없었다. nav> a : active가 a : active보다 우선합니다. 또한 JS 파일에서 JS에서 하드 코딩 된 색상을 설정하는지 확인하기 위해 검색 할 수있는 키워드가 있습니까? – user216485

+0

일반적으로 JS에서는 요소에 대한 클래스 만 변경하고 색상은 완전히 변경하지 않습니다. Andrey이 말했듯이, Chrome dev 도구 또는 Firebug를 firefox로 열고 요소를 검사하여 설정 방법을 확인하십시오. – Robert

0

모든 규칙에 대해 그렇게 할 수있는 방법은 없습니다를 디버깅하기 어렵다으로

a:active { 
    color: red !important; 
} 

중요한이 매우 좋지 않다 - 그들은 JavaScrip를 사용하여 요소에 직접적으로 어떤 스타일을 적용하는 경우 일반적인 경우에는 무시할 수 없습니다.

Chrome DevTools를 사용하여 어떤 CSS가 흰색 색상 규칙을 생성하는지 식별 할 수 있습니다. 요소에 :active을 강제 적용 할 수 있습니다. CSS 규칙이 없으면 JavaScript로 처리됩니다.

+0

요소를 검사하고 스타일 섹션을 보면 클릭 한 활성 링크를 강제로 누르는 CSS가 없습니다. 흰색. 거기에 자바 스크립트 코드가 있는지 확인하는 방법이 있나요? 나는 자바 스크립트 코드를 많이 모른다. 그래서 나는 무엇을 찾아야할지 모른다. 또한 Chrome DevTools를 사용하는 요소에서 어떻게 강제로 활성화 할 수 있습니까? – user216485

0

클래스에 대한 링크는 것 클래스와 같은 외모 = "탐색"또는 어떤 속성 링크를 검색합니다. 신청하십시오. a.nav : active {your style;} 여기서 nav는 클래스입니다