Question

就像这样http://www.w3schools.com/html/default.asp＆＃34; HTML HOME＆＃34;按钮颜色为绿色，因为它是活动链接。

那么如何在我的网站上做同样的事情？

我的HTML代码：

<!-- Website fixed header-->   
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website"><a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html" style="text-decoration:none"><div class="hoverwebsite">Website Name</div></a></button>    
<div class="dropdown-content website" style="left:0;">
</div>
</div>

我的CSS：

    /* Top header orange color */
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;


}


/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;


}

.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;

}

.dropdown-content.website {
   display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}

.dropdown.website:hover .dropdown-content {
 display: block;

 }

.dropdown.website:hover .dropbtn.website {
 background-color: #4CAF50;

 }

.hoverwebsite {
color: #f2f2f2;
font-weight:bold;

}
a:active {
background-color: yellow;
}


</style>

这是我的 JSFiddle。如果您需要更多详细信息，请告诉我们。

Answer 1

在要保持活动的锚标记中添加class="active"

div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;


}


/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;

}

.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;

}

.dropdown-content.website {
   display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}

.dropdown.website:hover .dropdown-content {
 display: block;

 }

.dropdown.website:hover .dropbtn.website {
 background-color: #4CAF50;
height:38px;
 }

.hoverwebsite {
color: #f2f2f2;
font-weight:bold;

}

a{
  height:38px;
display:block;
padding-top:16px;}

a.active {
background-color: #4CAF50;
color: #f2f2f2;
}

<div class="dropdown website" style="left:0px;">
<button class="dropbtn website"><a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html"  style="text-decoration:none" id="website" >Website Name</a> <a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html"  style="text-decoration:none" id="website2">Website Name</a></button>    
<div class="dropdown-content website" style="left:0;">
</div>
</div>
</div>

编辑1： 在您希望锚标记保持活动的页面中有此js代码。我已经从html代码中的锚标记中删除了活动类。也有脚本引用jquery库。

<强> JS：

$(document).ready(function() {
 $('#website').addClass('active');
});

编辑2： 您可能无法处理按钮中的边距，使按钮位置绝对而不是固定，并使用顶部，左侧，右侧，底部css属性对齐它们

.dropbtn.website {
    top:0px;
    background-color: #000000;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    left: 0px;
    padding:0px;
    position:absolute;
    left:10px;
    width:150px;
    }

   .dropdown.website {
      Top:43px;
      position: fixed;
      display: inline-block;
      margin-right:10px;
     }

Codepen 使用此css查看它是如何对齐的。

编辑3：

在索引文件

中使用此功能

<script>
 $(document).ready(function() {
 $('#website').addClass('active');
 if($('#website2').hasClass('active'))
   $('#website2').removeClass('active');
 }); 
 </script>

和yooo.html文件中的此脚本

<script>
 $(document).ready(function() {
 if($('#website').hasClass('active'))
   $('#website').removeClass('active');
 $('#website2').addClass('active');
 }); 
 </script>

同时检查更新的html我已将第二个锚标记的ID更改为 website2

如何更改导航栏中的活动链接颜色

1 个答案: