0

ウェブサイトのページに標準メニューを表示したい。以下に示すように、インクルードファイルを使用しています。

<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>

ただし、「現在の」クラスがメニューのリンクを強調表示しているため、別のページをクリックするたびにクラスを変更したいと思います。どうすればよいですか？以下のshwonとしてJavascriptを試しましたが、機能しません...事前にthnx

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);
}
4

1 に答える 1

1

作業コードの例を次に示します。

<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>

リンクもフォーマットしたいと思っていると思い.current a { }ますので、現在のリンクの CSS を配置する場所を追加して、その方法を示しました。.current { }ほとんどの場合、リスト項目にのみ影響します。

于 2012-10-09T03:21:54.100 に答える