Как изменить CSS для активной ссылки на основе хэштега
У меня есть ситуация здесь о том, как изменить мою активную ссылку CSS на основе хэштега. Весь контент был на одной странице, и я использую раздел #url для вызова контента.
Я попробовал несколько примеров javascript и учебник, но кажется, что он не работает, поэтому я решил создать новый вопрос здесь и поделиться своим кодом со всеми вами.
Вот мой URL-адрес в браузере:
file:///Users/FZ/Desktop/HLT/services.html#/mergersandacquisitions
file:///Users/FZ/Desktop/HLT/services.html#/corporatecommercial
это код для боковой строки меню:
Our Services:
<a href="#capitalmarket">
Capital Market
</a>
<a href="#mergersandacquisitions">
Mergers & Acquisitions
</a>
<a href="#corporatecommercial">
Corporate Commercial
</a>
и вот несколько примеров содержания по ссылке:
Capital Market
<p>We have significant experience advising clients on complex securities law matters.We have advised on domestic and international cross-border transactions including overseas IPOs.</p>
<p>
We have an award-winning Islamic Finance capability that can structure and execute complex financing deals.We leverage the expertise and experience of our established network to help you achieve your financing objectives from origination to execution.</p>
Sukuks
Structured Finance
Take-overs
Underwriting Agreements
Warrants
<br><br><br><br><br>Mergers & Acquisitions<br>
<p>We advise on the full range of merger and acquisition transactions involving domestic and international businesses at all stages of development.</p>
<p>Our clients range from private companies to public listed companies and multinationals.Where a capital markets angle is involved, we tap on the resources of our Capital Markets team to ensure you cross the finish line.</p>
Capital Restructuring
Commercial Transactions
Consultancy
Corporate Compliance
Corporate Reorganisations
Due Diligence
Joint Venture
Privatisations
Private Equity & Venture Capital
Share & Business Acquisitions
Take-overs
вот CSS:
/*/*Navigation menu services*/
h3{
font-family: futura;
}
#navigation-block {
position:relative;
top:200px;
left:200px;
font-family: "Lucida Grande", Verdana, sans-serif;
}
#hide {
position:absolute;
top:30px;
left:-190px;
}
ul#sliding-navigation
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 150px;
padding: 5px 18px;
margin: 0;
margin-bottom: 5px;
}
ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#333 repeat-y;
font-weight: normal;
}
ul#sliding-navigation li.sliding-element a
{
color: #999;
background:#222 repeat-y;
border: 1px solid #1a1a1a;
text-decoration: none;
font-family: futura;
}
ul#sliding-navigation li.sliding-element a:hover { color: #BBA842; }
что я должен сделать, чтобы изменить активную ссылку для каждой ссылки #. Пример, когда я нажимаюСлияния & Приобретения, только "Слияния & Приобретения» ссылка имеет активный цвет вместо всех цветов ссылки.
Я также пытаюсь создать что-то вроде: активный, но не работает.
ul#sliding-navigation li.sliding-element a:active { color: #BBA842; }
Пожалуйста, у кого-нибудь есть идея, поделитесь и помогите мне. Спасибо
p / s: antindexer только что решил мою проблему. так что я добавляю: в style.css, я добавляю:
li.active a
{
color: #BBA842!important;
и в HTML-файл. я добавляю javascript
$(document).ready(function(){
$('div#services_menu li').click(
function(e)
{
$('div#services_menu li').removeClass('active');
$(e.currentTarget).addClass('active');
}
);
});