。CSS上的当前链接样式仅适用于第1页,不会转移到其他页面 [英] .Current link styling on CSS only works on the 1st page and doesn't transfer to the other

查看:170
本文介绍了。CSS上的当前链接样式仅适用于第1页,不会转移到其他页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我为两个HTML页面工作的CSS,然而,当前的链接样式只适用于第一页,并不会传输到第二页的点击。你知道为什么会这样吗?

So the css that I have works for both html pages, however, the current link styling only works on the first page and doesn't transfer to the 2nd page when clicked. Do you know why this would be?

处理当前链接样式的css

css that handles the current link styling

li.current > a:link {
    border-bottom: 0.3px solid #000000;
}

第一页html(适用于此)

1st page html (works on this)

<!--Header-->
<header class="boxed" id="header-white">
    <div class="header-margin">
        <div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div>
        <ul class="header-nav">
            <li class = "current"><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li>
            <li><a class="ajax-link" href="about-me.html">About me</a></li>
        </ul>

第二个html页面(只在首次打开时才适用)

2nd html page (works on this one, only if opened first)

<!--Header-->
<header class="boxed" id="header-white">
    <div class="header-margin">
        <div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div>
        <ul class="header-nav">
            <li><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li>
            <li class = "current"><a class="ajax-link" href="about-me.html">About me</a></li>
        </ul>


推荐答案

请尝试下面的css获取链接第二页。您需要输入a:visited属性。

Please try below css for get link in second page. You need to put "a:visited" property.

<style type="text/css">
    li.current > a:link {
        border-bottom: 0.3px solid green;
        color: red;
    }
    li.current > a:visited {
        border-bottom: 0.3px solid green;
        color: red;
    }
</style>

这篇关于。CSS上的当前链接样式仅适用于第1页,不会转移到其他页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆