クリック後にonclickを有効にしてメニュー項目を維持する

Question

作成した垂直メニューがあります。アイテムの1つにhref属性があり、その他のアイテムにonclickがあります。私は各項目をクリックした後で強調表示したい。 a:activeを使用しましたが、アイテムをクリックしている間のみハイライト表示されます。

私もa:targetを使用しましたが、それは私を助けませんでした。 CSSやjavascriptを使ってこれを達成する方法はありますか？

.vertical-menu { 
 
    width: 200px; 
 
} 
 

 
.vertical-menu a { 
 
    background-color: #eee; 
 
    color: black; 
 
    display: block; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
} 
 

 
.vertical-menu a:hover { 
 
    background-color: #ccc; 
 
} 
 

 
.vertical-menu a:active { 
 
    background-color: #FF8F2B; 
 
} 
 

 
.vertical-menu a:target { 
 
    background-color: #FF8F2B; 
 
}

<div class="vertical-menu"> 
 
\t \t <a href="http://example.com/">Main</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS1.xml')">New Collection</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS2.xml')">Intimate Apparel</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS3.xml')">Beachwear</a> 
 
</div>

Answer 1

これは、それがどうあるべきかとどのようにしたいのですか？クリックすると背景色が変わり、他のリンクをクリックすると前のリンクが正常に戻り、新しいリンクがアクティブに戻ります。

$('.vertical-menu a').on('click', function() { 
 
$('.vertical-menu a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
}); 
 

 
function loadXMLDoc(x){ 
 

 
}

.vertical-menu { 
 
    width: 200px; 
 
} 
 

 
.vertical-menu a { 
 
    background-color: #eee; 
 
    color: black; 
 
    display: block; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
} 
 

 
.vertical-menu a:hover { 
 
    background-color: #ccc; 
 
} 
 

 
.vertical-menu .active { 
 
    background-color: #FF8F2B; 
 
} 
 

 
.vertical-menu a:target { 
 
    background-color: #FF8F2B; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vertical-menu"> 
 
\t \t <a href="http://example.com/">Main</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS1.xml')" href="#new">New Collection</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS2.xml')" href="#int">Intimate Apparel</a> 
 
\t \t <a onclick="loadXMLDoc('STATISTICS3.xml')" href="#beach">Beachwear</a> 
 
</div>

Answer 2

はい、あなたは、JavaScriptとCSSを使ってこれを実現。ここでは要素上のアクティブなクラスを設定し、アクティブなクラスに適用されるいくつかの基本的なスタイルを持っている（jQueryライブラリを使用して）例

です：

$('.vertical-menu a').on('click', function() { 
    $(this).addClass('active'); 
}); 

Live example