锚标记：单击时打开div并单击更改bg颜色

时间：2016-12-26 09:49:01

标签： javascript jquery html css 

<div class="nav_bar">
                <ul>
                                      <li><a href="#">Post sponsor job</a>
                    </li>
                    <li><a href="#">Applied KOLs</a>
                    </li>
                    <li><a href="#">Purchase and billing</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                </ul>
            </div>




<div class="down_nav_bar">
                    <ul>
                        <li><a href="#">Purchase Plan</a>
                        </li>
                        <li><a href="#">My account</a>
                        </li>
                        <li><a href="">Invoice</a>
                        </li>
                        <li><a href="">How to pay</a>
                    </ul>
                </div>
<!DOCTYPE html>
    <html>
        <head>
            <title>RYZJMScience</title>
            <style>
                #title {
                    display: block;
                    margin: 0px auto;
                }
                .page {
                    text-decoration: none;
                    display: inline;
                    font: "Georgia, serif;
                    font-size: 40px;
                    font-color: rgb(0,0,205);
                    border: 2px 1px 1px 1px solid rgb(255,140,0);
                }
            </style>
        </head>
        <body>
            <img src="title.png" id="title">
            <a href="index.html" class="page">Home</a>
            <a href="weekly.html" class="page">Weekly</a>
            <a href="monthly.html" class="page">Monthly</a>
            <a href="physics.html" class="page">Physics</a>
            <a href="chemistry.html" class="page">Chemistry</a>
            <a href="biology.html" class="page">Biology</a>
            <a href="technology.html" class="page">Technology</a>
        </body>
    </html>

您好， 我的疑问是，当我将鼠标悬停在购买结算上时，第二个导航菜单应该显示为向下，购买结算应该具有相同的背景，当我们将鼠标悬停在上时利

就像in this image

一样

任何帮助都会很棒。

谢谢。

3 个答案:

答案 0 :(得分：0)

试试这个。此代码段会在点击purchase and billing链接

时显示下方菜单

＆＃13;
＆＃13; 
$(document).ready(function(){
  $('.down_nav_bar').removeClass('displayed');
  $('#purchase').mouseenter(function(){
    $('#purchase').addClass('newColor');
    $('.down_nav_bar').addClass('displayed');
  });
  $('.nav_bar>ul>li:not(#purchase)').mouseenter(function(){
    $('#purchase').removeClass('newColor');
    $('.down_nav_bar').removeClass('displayed');
  });
  $('.nav_bar>ul>li').click(function(){
    $('.nav_bar>ul>li').removeClass("newColor");
    $(this).toggleClass('newColor');
  });
});
＆＃13; 
.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left; }
  .nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: thin white solid; }
    .nav_bar ul li {
      list-style: none; }
      .nav_bar ul li a {
        text-decoration: none;
        color: #ffffff;
        display: block;
        border-right: 1px solid #fff;
        padding: 8px 16px; }
  .nav_bar ul li a:hover {
    background: #e6b3a1;
    text-decoration: none;
    color: #c3000f; }

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  display:none;
  float: left; }
  .down_nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex; }
    .down_nav_bar ul li {
      list-style: none; }
      .down_nav_bar ul li a {
        text-decoration: none;
        color: #c3000f;
        display: block;
        padding: 8px 23px 8px 18px; }
  .down_nav_bar ul li a:link {
    text-decoration: none; }
  .down_nav_bar ul li a:visited {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:hover {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:active {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
.down_nav_bar.displayed{
  display:block;
}
.newColor{
  background: #e6b3a1;
  color:#c3000f;
}
.nav_bar ul li.newColor>a{
  color:#c3000f;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav_bar">
                <ul>
                                      <li><a href="#">Post sponsor job</a>
                    </li>
                    <li><a href="#">Applied KOLs</a>
                    </li>
                    <li id="purchase"><a href="#">Purchase and billing</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                </ul>
            </div>




<div class="down_nav_bar displayed">
                    <ul>
                        <li><a href="#">Purchase Plan</a>
                        </li>
                        <li><a href="#">My account</a>
                        </li>
                        <li><a href="">Invoice</a>
                        </li>
                        <li><a href="">How to pay</a>
                    </ul>
                </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

只需用css修复此问题，如果这是您需要的话，请检查它？

＆＃13;
＆＃13; 
.nav_bar {
background: #c30015;
margin-left: 50px;
float: left;
}
.nav_bar > ul {
padding: 0;
margin: 0;
display: flex;
border-bottom: thin white solid;
position:relative;
}
.nav_bar ul li {
list-style: none;
}
.nav_bar ul li a {
text-decoration: none;
color: #ffffff;
display: block;
border-right: 1px solid #fff;
padding: 8px 16px;
}
.nav_bar ul li a:hover {
background: #e6b3a1;
text-decoration: none;
color: #c3000f;
}
.nav_bar ul li a:active , .nav_bar ul li a:focus {
background: #e6b3a1;
text-decoration: none;
color: #c3000f;
}
.nav_bar ul li:hover .down_nav_bar {
display:block;
}
.down_nav_bar {
background: #e6b3a1;
margin-left: 34px;
float: left;
position:absolute !important;
left:0;
width:100%;
display:none;
padding: 0;
margin: 0;
}

.down_nav_bar li {
list-style: none;
display:inline-block;
}
.down_nav_bar li a {
text-decoration: none;
color: #c3000f;
display: block;
padding: 8px 23px 8px 18px;
}
.down_nav_bar li a:link {
text-decoration: none;
}
.down_nav_bar li a:visited {
border-bottom: 2px #c3000f solid;
text-decoration: none;
}
.down_nav_bar li a:hover {
border-bottom: 2px #c3000f solid;
text-decoration: none;
}
.down_nav_bar li a:active {
border-bottom: 2px #c3000f solid;
text-decoration: none;
}
.down_nav_bar li .active {
border-bottom: 2px #c3000f solid;
text-decoration: none;
}
＆＃13; 
<div class="nav_bar">
  <ul>
    <li><a href="#">Post sponsor job</a> </li>
    <li><a href="#">Applied KOLs</a> </li>
    <li><a href="#">Purchase and billing</a>
      <ul class="down_nav_bar">
        <li><a href="#" class="active">Purchase Plan</a> </li>
        <li><a href="#">My account</a> </li>
        <li><a href="">Invoice</a> </li>
        <li><a href="">How to pay</a>
      </ul>
    </li>
    <li><a href="#">Account Settings</a> </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

是或者您可以使用:target属性（例如

）来执行此操作

＆＃13;
＆＃13; 
.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left;
}
.nav_bar > ul {
  padding: 0;
  margin: 0;
  display: flex;
  border-bottom: thin white solid;
  position:relative;
}
.nav_bar ul li {
  list-style: none;
}
.nav_bar ul li a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  border-right: 1px solid #fff;
  padding: 8px 16px;
}

.nav_bar ul li a:hover,
.nav_bar ul li a:focus,
.nav_bar ul li a:active,
#target:target {
  background: #e6b3a1;
  text-decoration: none;
  color: #c3000f;
}

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  float: left;
  position:absolute !important;
  left:0;
  width:100%;
  display:none;
  padding: 0;
  margin: 0;
}

.down_nav_bar li {
  list-style: none;
  display:inline-block;
}
.down_nav_bar li a {
  text-decoration: none;
  color: #c3000f;
  display: block;
  padding: 8px 23px 8px 18px;
}
.down_nav_bar li a:link {
  text-decoration: none;
}
.down_nav_bar li a:visited {
  border-bottom: 2px #c3000f solid;
  text-decoration: none;
}
.down_nav_bar li a:hover {
  border-bottom: 2px #c3000f solid;
  text-decoration: none;
}
.down_nav_bar li a:active {
  border-bottom: 2px #c3000f solid;
  text-decoration: none;
}
.down_nav_bar li .active {
  border-bottom: 2px #c3000f solid;
  text-decoration: none;
}

#target:target + ul {
  display:block;
}
＆＃13; 
<div class="nav_bar">
  <ul>
    <li><a href="#">Post sponsor job</a> </li>
    <li><a href="#">Applied KOLs</a> </li>
    <li><a id="target" href="#target">Purchase and billing</a>
      <ul class="down_nav_bar">
        <li><a href="#" class="active">Purchase Plan</a> </li>
        <li><a href="#">My account</a> </li>
        <li><a href="">Invoice</a> </li>
        <li><a href="">How to pay</a>
      </ul>
    </li>
    <li><a href="#">Account Settings</a> </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您只需使用jquery / javascript即可完成此操作。看看这个。

$(document).ready(function(){
    $(".nav_bar ul li").click(function(){
            	        if($(this).text().trim()==='Purchase and billing'){
        $(".down_nav_bar").show();
                $(".nav_bar ul li").css('background-color', '#c30015')
        $(this).css('background-color', '#e6b3a1');
                
      }else{
        $(".down_nav_bar").hide();
  $(".nav_bar ul li").css('background-color', '#c30015');
      }
               
        
});
});
.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left; }
  .nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: thin white solid; }
    .nav_bar ul li {
      list-style: none; }
      .nav_bar ul li a {
        text-decoration: none;
        color: #ffffff;
        display: block;
        border-right: 1px solid #fff;
        padding: 8px 16px; }
  .nav_bar ul li a:hover {
    background: #e6b3a1;
    text-decoration: none;
    color: #c3000f; }

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  float: left; }
  .down_nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex; }
    .down_nav_bar ul li {
      list-style: none; }
      .down_nav_bar ul li a {
        text-decoration: none;
        color: #c3000f;
        display: block;
        padding: 8px 23px 8px 18px; }
  .down_nav_bar ul li a:link {
    text-decoration: none; }
  .down_nav_bar ul li a:visited {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:hover {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:active {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav_bar">
                <ul>
                   <li><a href="#">Post sponsor job</a>
                    </li>
                    <li><a href="#">Applied KOLs</a>
                    </li>
                    <li><a href="#">Purchase and billing</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                </ul>
            </div>




<div class="down_nav_bar" style="display:none">
                    <ul>
                        <li><a href="#">Purchase Plan</a>
                        </li>
                        <li><a href="#">My account</a>
                        </li>
                        <li><a href="">Invoice</a>
                        </li>
                        <li><a href="">How to pay</a>
                    </ul>
                </div>

相关问题
最新问题