Question

目前，我正在使用一个基本导航栏，当单击该页面以转到新页面时，该导航栏会更改文本的颜色（因此，一页上的文本与另一页上的文本颜色不同）。我最初使用多个CSS文件启动项目以获得我正在寻找的结果，但这是非常低效的。显然＆＃34;如果＆＃34;语句不存在于CSS中，但是如果加载了某个页面，则可以调用操作。

HTML代码

CREATE TABLE #S(ID INT
                ,Qry VARCHAR(10)
                )

INSERT INTO #S VALUES
(1,'TRA,B')
,(2,'X,YA,ZT') 

DECLARE @s AS VARCHAR(1) = ','

;WITH cte_R
    AS
    (
    SELECT
        ID
        ,1 Ord
        ,LEFT(Qry,CHARINDEX(@s,Qry,0)) Val
        ,RIGHT(Qry,LEN(Qry)-CHARINDEX(@s,Qry,1)) Rem
    FROM
        #S
    WHERE
        Len(Qry) > 0
    UNION ALL
    SELECT
        ID
        ,Ord+1
        ,LEFT(Rem,CHARINDEX(@s,Rem+@s,0)) 
        ,RIGHT(Rem,LEN(Rem)-CHARINDEX(@s,Rem,0))
    FROM
        cte_R
    WHERE
        CHARINDEX(@s,Val,0) > 0
    )
SELECT
    ID
    ,Ord
    ,REPLACE(Val,@s,'') Val
FROM
    cte_R
ORDER BY
    ID
    ,Ord

CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Project</title>
    <link href="css/main.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
    <div class="header">
        <div class="navigation">
            <ul>
                <li class="login"><a href="#">Login</a></li>
                <li class="shop"><a href="#">Shop</a></li>
                <li class="wname"><a href="index.html">Website Name</a></li>
                <li class="contact"><a href="#">Contact</a></li>
                <li class="about"><a href="#">About</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

我将不胜感激，约旦

Answer 1

更改此规则以添加活动类：

li.active,
li:hover {
  color: #F68404;
  font-weight: 300;
}

在您的个人页面中，请使用<li>的课程。比方说，在Shop页面中，使用以下代码：

<li class="shop active"><a href="#">Shop</a></li>

这是因为，您没有使用任何检查位置和做事的东西。此外，您没有使用任何基于URL生成动态标头的后端应用程序。

在导航栏上工作并且遇到CSS文件集成问题

1 个答案: