Javascript 使用CSS突出显示当前页面上的导航选项卡？_Javascript_Jquery_Html_Css

Javascript 使用CSS突出显示当前页面上的导航选项卡？

javascript jquery html css

Javascript 使用CSS突出显示当前页面上的导航选项卡？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我对html/css还不熟悉，所以请耐心听我说。我有我想用作导航菜单的特定图像。我的html、css基本上如下所示： HTML 当我将鼠标悬停在图像上时，它确实会更改为高亮显示的图像，但当我单击链接时，选项卡会返回到正常图像。当用户当前在该页面上时，我希望它保持高亮显示。有人能帮我吗？我尝试过“访问”，但它似乎不起作用，我在谷歌搜索上找到的所有东西都和我尝试做的有点不同提前感谢。有很多方法可以做到这一点。使用带有一些额外标记的PHP、JavaScript或纯CSS 既然你说你是HTML/

我对html/css还不熟悉，所以请耐心听我说。我有我想用作导航菜单的特定图像。我的html、css基本上如下所示：

HTML

当我将鼠标悬停在图像上时，它确实会更改为高亮显示的图像，但当我单击链接时，选项卡会返回到正常图像。当用户当前在该页面上时，我希望它保持高亮显示。有人能帮我吗？我尝试过“访问”，但它似乎不起作用，我在谷歌搜索上找到的所有东西都和我尝试做的有点不同

提前感谢。

有很多方法可以做到这一点。使用带有一些额外标记的PHP、JavaScript或纯CSS

既然你说你是HTML/CSS新手，我想CSS方式对你最合适

那么你有3页完全相同的菜单代码？只需在每个站点上放置以下内容：

对于您的主页：

<div id="navigation">
 <a id="main" class="active" href="domain.com/main">main</a>
 <a id="tips" href="domain.com/tips">tips</a>
 <a id="news" href="domain.com/news">news</a>
</div>

为了回答特定的问题，当用户单击链接时，他们会被带到一个新页面。这些链接本身并没有关于它们存在于哪个页面的概念

所以你有几个选择。常见的解决方案是使用服务器端代码发送带有某个指示符（即当前链接）的HTML。例如，您可以添加一个类似“current”的类。此外，如果这是您所在的页面，也不需要链接，因此不应该链接该文本

但是，如果您没有访问服务器的权限，则需要手动添加。您可以为

.current

创建新样式，然后在该页面上，将该类应用于活动链接

但是，可能您将此菜单作为包含项包含在内……这意味着每个页面的代码都是相同的。在这种情况下，您将希望使用CSS以活动链接为目标。因此，在每个页面上，您都有一个自定义的CSS

例如，在“提示”页面上，您可以执行以下操作：

#tips {put your style here for active links}

要想变得更加新奇/自动化，您可以编写一些javascript：

解析URL
找出页面的文件名
将该文件名与链接列表中的内容匹配
为您动态应用该类

另外，在CSS中没有必要使用

a#tips

的语法。原因是如果您使用的是一个id，那么页面上只能有一个id，因此

有点多余。

这个示例对我来说很好

主页

<html>
<head>
    <title>Home</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body#home a#homenav, body#second a#secondnav {
            color: #f8f8f8;
            background: #D34;
            cursor: default;
        }
    </style>
</head>
<body id="home">
    <nav>
        <ul>
            <li><a href="nav.html" id="homenav">Home</a></li>
            <li><a href="nav2.html"  id="secondnav">Second</a></li>
        </ul>
    </nav>
</body>


家
body#home a#homenav，body#second a#secondnav{
颜色：#F8；
背景：#D34；
游标：默认值；
}

第二页

<html>
<head>
    <title>Second</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    body#home a#homenav, body#second a#secondnav {
        color: #f8f8f8;
        background: #D34;
        cursor: default;
    }
</style>
<body id="second">
    <nav>
        <ul>
            <li><a href="nav.html" id="homenav">Home</a></li>
            <li><a href="nav2.html"  id="secondnav">Second</a></li>
        </ul>
    </nav>
</body>


第二
body#home a#homenav，body#second a#secondnav{
颜色：#F8；
背景：#D34；
游标：默认值；
}

使用CSS突出显示当前页面上的导航选项卡的一种方法是创建一个活动类以附加到当前所在标记的类中。您的活动css类将详细说明当它被认为是活动的时，您希望它的外观。然后，根据您所在的选项卡，为该选项卡插入活动as类，如下所示

`
突出显示页面的导航选项卡
navbar先生{
背景颜色：紫色；
字体大小：12px！重要；
线高：1.42857143！重要；
}
.navbar li a、.navbar.navbar品牌{
颜色：#fff！重要；
}
.navbar导航李a：悬停，.navbar导航李.active a{
颜色：紫色！重要；
背景色：#fff！重要；
}






`

id选择器和类别选择器之间不应存在空格。i、 e.

#main.active

右侧。有和没有空间有很大区别：

<div id="navigation">
 <a id="main" href="domain.com/main">main</a>
 <a id="tips" href="domain.com/tips">tips</a>
 <a id="news" class="active" href="domain.com/news">news</a>
</div>

#main.active {background-image:url(main-highlight.png);}
#tips.active {background-image:url(tips-highlight.png);}
#news.active {background-image:url(news-highlight.png);}

#tips {put your style here for active links}

<html>
<head>
    <title>Home</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body#home a#homenav, body#second a#secondnav {
            color: #f8f8f8;
            background: #D34;
            cursor: default;
        }
    </style>
</head>
<body id="home">
    <nav>
        <ul>
            <li><a href="nav.html" id="homenav">Home</a></li>
            <li><a href="nav2.html"  id="secondnav">Second</a></li>
        </ul>
    </nav>
</body>

<html>
<head>
    <title>Second</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    body#home a#homenav, body#second a#secondnav {
        color: #f8f8f8;
        background: #D34;
        cursor: default;
    }
</style>
<body id="second">
    <nav>
        <ul>
            <li><a href="nav.html" id="homenav">Home</a></li>
            <li><a href="nav2.html"  id="secondnav">Second</a></li>
        </ul>
    </nav>
</body>

`
<html>
<head>
  <title>Highlight Nav Tab of Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-    scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.navbar {
  background-color: purple;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
}
.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
  color: purple !important;
  background-color: #fff !important;
}
</style>
<body id="about.html" data-spy="scroll" data-target=".navbar" data-offset="60">
<!--navbar-->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li ><a href="#">Home</a></li>
                <li class = "active"><a href="#">About</a></li>
                <li ><a href="#">More</a></li>
                <li ><a href="#">Contact Us</a></li> 
            </ul>
        </div>
        </div>
    </nav>
</body>
</html>
`