Webページの選択されたメニュー項目の色を動的に変更する方法は？
Webページの開発は初めてです。 stackoverflow.comのメニューに似たメニュー（上記の質問、タグ、ユーザーなど）を作成したいと考えています。選択したメニューの色を変更するにはどうすればよいですか（たとえば、「クリック」すると質問の背景色がオレンジ色に変わります）。
私はそれが簡単だったので（CSSを使用して）ホバリング中に色を変更することができましたが、これには問題があります。
CSSのみを使用して、クリックしたアイテムの色を変更するこの効果を実現できますか？
クラスのアクティブおよびホバーのスタイルを設定します。
サーバー側でliをアクティブにする必要があるより。したがって、メニューを描画するときは、どのページがロードされているかを知り、それを次のように設定する必要があります。
<li class="active">Question</li>
<li>Tags</li>
<li>Users</li>
ただし、リロードせずにコンテンツを変更する場合、サーバー上のアクティブなli要素を変更することはできません。javascriptを使用する必要があります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.menu{width: 300px; height: 25; font-size: 18px;}
.menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
.menu li:hover, .menu li.active {
background-color: #f90;
}
</style>
</head>
<body>
<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(
function()
{
$(".menu li").click(make_button_active);
}
)
</script>
</body>
</html>
JavaScriptを使用してこれを実装するのがおそらく最も簡単でしょう...デモ用のJQueryスクリプトです...他の人が述べたように...アクティブタブを示す「アクティブ」というクラスがあります-擬似クラスではありません：アクティブ。選択したもの、現在のものなど、簡単に名前を付けることができます。
/* CSS */
#nav { width:480px;margin:1em auto;}
#nav ul {margin:1em auto; padding:0; font:1em "Arial Black",sans-serif; }
#nav ul li{display:inline;}
#nav ul li a{text-decoration:none; margin:0; padding:.25em 25px; background:#666; color:#ffffff;}
#nav ul li a:hover{background:#ff9900; color:#ffffff;}
#nav ul li a.active {background:#ff9900; color:#ffffff;}
/* JQuery Example */
<script type="text/javascript">
$(function (){
$('#nav ul li a').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
</script>
/* HTML */
<div id="nav" >
<ul>
<li><a href='index.php?1'>One</a></li>
<li><a href='index.php?2'>Two</a></li>
<li><a href='index.php?3'>Three</a></li>
<li><a href='index.php?4'>Four</a></li>
</ul>
</div>
私はこの質問に遅れていますが、本当に簡単です。 cssファイルで複数のタブクラスを定義し、LIタグの作成中に必要なタブをphpファイルのクラスとしてロードします。
完全にサーバー上で実行する例を次に示します。
CSS
html ul.tabs li.activeTab1, html ul.tabs li.activeTab1 a:hover, html ul.tabs li.activeTab1 a {
background: #0076B5;
color: white;
border-bottom: 1px solid #0076B5;
}
html ul.tabs li.activeTab2, html ul.tabs li.activeTab2 a:hover, html ul.tabs li.activeTab2 a {
background: #008C5D;
color: white;
border-bottom: 1px solid #008C5D;
}
PHP
<ul class="tabs">
<li <?php print 'class="activeTab1"' ?>>
<a href="<?php print 'Tab1.php';?>">Tab 1</a>
</li>
<li <?php print 'class="activeTab2"' ?>>
<a href="<?php print 'Tab2.php';?>">Tab 2</a>
</li>
</ul>
現在使用している純粋なCSSソリューションがあります。
ページとメニュー項目を識別するボディID（またはクラス）を追加してから、次のようなものを使用します。
HTML：
<html>
<body id="body_questions">
<ul class="menu">
<li id="questions">Question</li>
<li id="tags">Tags</li>
<li id="users">Users</li>
</ul>
...
</body>
</html>
CSS：
.menu li:hover,
#body_questions #questions,
#body_tags #tags,
#body_users #users {
background-color: #f90;
}
これを試して。別のアイテムがクリックされるまで色を保持します。
<style type="text/css">
.activeElem{
background-color:lightblue
}
.desactiveElem{
background-color:none
}
}
</style>
<script type="text/javascript">
var activeElemId;
function activateItem(elemId) {
document.getElementById(elemId).className="activeElem";
if(null!=activeElemId) {
document.getElementById(activeElemId).className="desactiveElem";
}
activeElemId=elemId;
}
</script>
<li id="aaa"><a href="#" onclick="javascript:activateItem('aaa');">AAA</a>
<li id="bbb"><a href="#" onClick="javascript:activateItem('bbb');">BBB</a>
<li id="ccc"><a href="#" onClick="javascript:activateItem('ccc');">CCC</a>
PHPを使用してURLを検索し、ページ名を一致させます（.phpの拡張子なしで、連絡先、連絡先フォームなどの共通の同じWordを持つ複数のページを追加することもできます。すべてのクラスにそのクラスが追加されます）、PHPを使用して色を変更するなど）のクラスを追加します。そのためには、ファイル拡張子.phpでページを保存する必要があります。
これがデモです。必要に応じてリンクとページを変更します。すべてのリンクのCSSクラスは.tabであり、アクティブリンクには.currentpageの別のクラスもあります（PHP関数）と同様） CSSルールは上書きされます。好きな名前を付けることができます。
<?php # Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];?>
<div class="nav">
<div class="tab
<?php
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " currentpage";
?>"><a href="index.php">Home</a>
</div>
<div class="tab
<?php
if(preg_match("/services/i", $currentpage))
echo " currentpage";
?>"><a href="services.php">Services</a>
</div>
<div class="tab
<?php
if(preg_match("/about/i", $currentpage))
echo " currentpage";
?>"><a href="about.php">About</a>
</div>
<div class="tab
<?php
if(preg_match("/contact/i", $currentpage))
echo " currentpage";
?>"><a href="contact.php">Contact</a>
</div>
</div> <!--nav-->
現在選択されているリンク/タブ ...の色を変更したい場合、最善の策は、現在選択されているリンク/タブにクラス（たとえばactive）を適用することですそして、これを異なるスタイルにします。
例のスタイルは次のとおりです。
li.active, a.active {
background-color: #f90;
}
最後に、私はあなたのすべての助けと投稿onclickリンクスタイルを変更で私が意図したものを達成することができました。そのコードを次に示します。これを行うためにJavaScriptを使用しました。
<html>
<head>
<style type="text/css">
.item {
width:900px;
padding:0;
margin:0;
list-style-type:none;
}
a {
display:block;
width:60;
line-height:25px; /*24px*/
border-bottom:1px none #808080;
font-family:'arial narrow',sans-serif;
color:#00F;
text-align:center;
text-decoration:none;
background:#CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom:0em;
padding: 0px;
}
a.item {
float:left; /* For horizontal left to right display. */
width:145px; /* For maintaining equal */
margin-right: 5px; /* space between two boxes. */
}
a.selected{
background:orange;
color:white;
}
</style>
</head>
<body>
<a class="item" href="#" >item 1</a>
<a class="item" href="#" >item 2</a>
<a class="item" href="#" >item 3</a>
<a class="item" href="#" >item 4</a>
<a class="item" href="#" >item 5</a>
<a class="item" href="#" >item 6</a>
<script>
var anchorArr=document.getElementsByTagName("a");
var prevA="";
for(var i=0;i<anchorArr.length;i++)
{
anchorArr[i].onclick = function(){
if(prevA!="" && prevA!=this)
{
prevA.className="item";
}
this.className="item selected";
prevA=this;
}
}
</script>
</body>
</html>