자바 스크립트로 포함 파일 편집

Question

내 웹 사이트의 페이지에 표준 메뉴를 표시하고 싶습니다. 나는 아래와 같은 파일을 포함 사용하고 있습니다 :

<div class="header box"> 
<ul class="nav box"> 
<li class="current" id="home"><a href="index.php" onclick="current('home')">Home</a></li> 
<li class="" id="onlineSchedule"><a href="onlineSchedule.php" onclick="current(this)">Online Schedule</a></li> 
<li class="" id="partners"><a href="partners.php" onclick="current(this)">Partners/Centers</a></li> 
<li class="" id="services"><a href="services.php" onclick="current(this)">Services</a></li> 
<li class="" id="products"><a href="products.php" onclick="current(this)">Products</a></li> 
<li class="" id="newsHighlights"><a href="newsHighlights.php" onclick="current(this)">News/Highlights</a></li> 
<li class="" id="signup"><a href="signup.php" onclick="current(this)">Sign Up!</a></li> 
<li class="" id="feedback"><a href="feedback.php" onclick="current(this)">Feedback</a></li> 
</ul> 

하지만 클래스가 "현재"클래스는 메뉴에있는 링크를 강조 나는 다른 페이지를 클릭 할 때마다 변경하고 싶습니다. 어떻게해야합니까?

<style type="text/css"> 
.current { 
    color: red; 
} 
.current a { 
    color: green; 
} 
</style> 
<div class="header box"> 
<ul class="nav box"> 
<li class="current" id="home"><a href="index.php" onclick="current('home')">Home</a></li> 
<li class="" id="onlineSchedule"><a href="onlineSchedule.php" onclick="current(this)">Online Schedule</a></li> 
<li class="" id="partners"><a href="partners.php" onclick="current(this)">Partners/Centers</a></li> 
<li class="" id="services"><a href="services.php" onclick="current(this)">Services</a></li> 
<li class="" id="products"><a href="products.php" onclick="current(this)">Products</a></li> 
<li class="" id="newsHighlights"><a href="newsHighlights.php" onclick="current(this)">News/Highlights</a></li> 
<li class="" id="signup"><a href="signup.php" onclick="current(this)">Sign Up!</a></li> 
<li class="" id="feedback"><a href="feedback.php" onclick="current(this)">Feedback</a></li> 
</ul> 
<script type="text/javascript"> 
function current(page) 
{ 
    document.getElementById("home").setAttribute("class", ""); 
    document.getElementById("onlineSchedule").setAttribute("class", ""); 
    document.getElementById("partners").setAttribute("class", ""); 
    document.getElementById("services").setAttribute("class", ""); 
    document.getElementById("products").setAttribute("class", ""); 
    document.getElementById("newsHighlights").setAttribute("class", ""); 
    document.getElementById("signup").setAttribute("class", ""); 
    document.getElementById("feedback").setAttribute("class", ""); 

    document.getElementById(page).className = "current"; 
} 

current("home"); 
</script> 

난 당신이 같은 링크를 포맷하고 싶었 겠지 :

function current(page) 
{ 
    //alert(page); 
    document.getElementById("home").setAttribute("class", ""); 
    document.getElementById("onlineSchedule").setAttribute("class", ""); 
    document.getElementById("partners").setAttribute("class", ""); 
    document.getElementById("services").setAttribute("class", ""); 
    document.getElementById("products").setAttribute("class", ""); 
    document.getElementById("newsHighlights").setAttribute("class", ""); 
    document.getElementById("signup").setAttribute("class", ""); 
    document.getElementById("feedback").setAttribute("class", ""); 

    document.getElementById(page).className += "current"; 
    var temp = document.getElementById("home").getAttribute("class"); 
    alert(temp); 
} 

Answer 1

여기 작업 코드의 예 아래 shwon 나는 자바 스크립트를 시도했지만 사전에 ... thnx 작동하지 않습니다 잘, 그래서 나는 현재의 링크를 위해 CSS를 넣을 곳인 .current a { }을 추가하는 방법을 보여 주었다. .current { }은 대부분 목록 항목에만 영향을 미칩니다.