I want the current page to be coloured with green background
Here my code
My css
a.current:active{background:green;}
Now. My html
<a class="current" href="/">Home</a> /
<a class="current" href="about">About</a> /
<a class="current" href="contact">Contact</a>
But it does not work assist me on this pls
"The :active selector is used to select and style the active link.
A link becomes active when you click on it."
What you should do is instead of using ´current´ class for all links, just use it for the current page like this
<a class="current" href="/">Home</a> / About / Contact
With a css containing sonething like this
a.current {
background: green;
}
Use the "current" class for current page link.
Related
Within a ul element i have a list of anchor tags that represent social media icons like so :
<ul class="social-menu">
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
</ul>
On Android mobile (the only OS that displays such behaviour by default)i'm noticing that when you click an item the highlight colour will appear correctly the first time. However, after that first time if you select a different icon the highlight appears over the previously selected icon.
I've tried explicitly declaring the -webkit-tap-highlight-color, ensuring the correct anchor tag has been clicked with some console logs for each item and even stripping back the content in the <a> tag to make sure that wasn't interfering but with no luck.
Check the yellow block on the top of this page :)
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
You can try :active or :active and :visited instead.
a:active {
background-color: yellow;
}
If you like my answer, please vote. I need some points to write comments :D If its not well answered, write the exact purpouse you need highlighting for. There wil be someone who will help for sure!
I've a menu that contains this content:
<div class="menu">
<ol>
<li data-target="home" >hello</li>
<li data-target="contact" >Contact</li>
<li data-target="policy_privacy" >Privacy</li>
</ol>
</div>
when I'm in the home page the anchors working well (#home, #contact), but if I'm on privacy_policy page, and try to go to home page, nothing happen. How can I detect in some way if I'm not in home page (which contains the anchors) and redirect the user to the home?
If adding separate markup for the privacy_policy page in which you can add the link of the homepage in the anchor tag seems not easy then you should
try something like this.
if (window.location.href.includes("privacy_policy")) {
document.querySelector('#home').href = "https://somesite.com";
}
Hi cant seem to get my Anchor links working in Safari...
<li class="nav-item"> <a class="nav-link" href="resources.html#copy" target="_top">Resources</a> </li>
<li class="nav-item"> <a class="nav-link" href="contact.html#copy" target="_top">Contact</a> </li>
I have a bunch of links that go to their respective pages and then should drop down to the "copy" anchor but this doesn't work in safari...
As you can see I've specified a target which i was told should help... I have tried changing my links to "page.html/#copy" but this doesn't work. i have also used ID as name is no longer used in html 5.
my anchor looks like this...
<h1 id="copy" class="-white">.</h1>
class just makes the text white so cant see the '.' on the page.
.-white{
color: #FFF;}
im assuming it's something simple and I've just been staring at this to long to see it...
Thank you
I have two links on my page and the views are changing according to it. The default view is the iPhone view and the other one is the tablet view. The link for the iPhone has the below CSS
.current-device{
border: 1px solid #999;
}
and it appears like,
The HTML code is,
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
<a class="tablet-icon" href ng-click="tabletView=true" ></a>
<div class="mobile-preview" ng-class="tabletView ? 'tabletView' : '!tabletView'" >
<div class="mobile-wrapper" >
<div class="mobile-simulator" overflow="scroll">
<me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}" ></me-tablet>
</div>
</div>
</div>
I want to give the same styling for the tablet link when it is clicked and remove the styling from the iPhone link, likewise change the style of the clicked link, but the default link style should be as it is when loading and should change when the user clicked the other link. I tried doing it but I could only do for hover over, the default style for the link does not appear in that way.
You can use ng-class to achieve this.
<a class="mobile-icon" href ng-click="tabletView=false" ng-class="{'current-device': !tabletView}"></a>
<a class="tablet-icon" href ng-click="tabletView=true" ng-class="{'current-device': tabletView}"></a>
I'm using Revolution Slider.
I'm adding a layer to the slide, and when I am inserting a button in the layer I use the following code:
<a href='#' class='tp-button blue small'>Blue Button</a>
I want the button to redirect to
<a href='http://www.hotelscombined.com/Place/Sydney.htm?a_aid=107946&brandid=289436' target='_blank' rel='nofollow'>Hotels in Sydney</a>
How can I do that?
<a class='tp-button blue small' href='http://www.hotelscombined.com/Place/Sydney.htm?a_aid=107946&brandid=289436' target='_blank' rel='nofollow'>Hotels in Sydney</a>
Adding additional properties to <a> tag won't hurt I guess.