如何在菜单栏中的活动菜单下方添加下划线（在ul中）

Question

I was making a menu bar which will open a different page when clicked every time. 我正在制作一个菜单栏，每次单击该菜单栏都会打开一个不同的页面。 I have used the code to change the background color whwn mwnu is clicked, but what i want is just to get an underline ( within the UL block : code attached) to show that menu is active and not complete change of backgroungd . 我使用了代码来更改单击了mwnu的背景色，但是我想要的只是获得一个下划线（在UL块内：附加了代码），以显示菜单处于活动状态，而没有完成backgroungd的更改。 help me . 帮我。

I am using the following code: 我正在使用以下代码：

HTML Wtih jQuery Script: HTML Wtih jQuery脚本：

 @CHARSET "ISO-8859-1"; * { margin:0;padding:0; } body { background:#E9EEF5; } #main { margin-bottom:3%; } ul { background-color:orange; } li { display:inline-block; float:left; width:33.33%; background:#E6E6E6; min-height:35px; text-align:center; vertical-align:middle; } img { cursor: pointer; } .default-text { font:20pt 'Georgia'; margin:20px auto 0; text-align:center; } h3 { font-size: 2em; margin-bottom: 20px; } .hide { display: none; } #aila { width:20px; height:20px; padding-top:7px; } #aila1 { width:20px; height:20px; padding-top:7px; } #aila2 { width:20px; height:20px; padding-top:7px; } #div0 { position:relative; width:99.4%; margin-left:0.3%; min-height:120px; float:left; background:#595959; margin-bottom:0.3%; } #div0-1 { min-height:120px; } #div0-1-p1 { color:#47B8B8; text-shadow: none; position: absolute; top: 0; left: 0; } #div0-2 { min-height:120px; } #div0-1-p2 { color:#FF807E; text-shadow: none; position: absolute; bottom: 0; right: 0; } #div1 { position: relative; width:49.55%; min-height:120px; float:right; background:#595959; margin-left:0.3%; margin-right:0.3%; margin-bottom:0.3%; color:#47B8B8; display:inline-block; } #div2 { position:relative; width:49.55%; min-height:120px; float:left; background:#595959; margin-bottom:0.3%; margin-left:0.3%; color:#47B8B8; display:inline-block; } #div3{ position:relative; width:99.3%; min-height:120px; float:left; background:#595959; margin-left:0.3%; margin-bottom:0.3%; color:#47B8B8; } .content_div { display: none; } .content_div:first-child { display: block; } #air { padding-top:30px; } #underline1 { clear:both; position: relative; height:5px; width:33.33%; margin-bottom:35px; background-color:red; }

 ></script> <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" <link rel="stylesheet" href="custom.css" type="text/css"></link> <script> $(document).ready(function(){ var flag; $('.au-img a').on("click", function(e) { var $this = $(this), $id = $this.attr('id'), $class = '.' + $('.about-' + $id).attr('class').replace('hide', ''); $('.default-text').addClass('hide'); $('.about-' + $id).removeClass('hide'); $('div[class*=about]').not($class).addClass('hide'); $(this).parent().css( "background-color", "cyan" ); $(flag).parent().css( "background-color", "#E6E6E6" ); flag=this; }); }); </script> </head> <body> <ul class="au-img" > <li><a id="andrew" ><img id="aila" src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/grid-layout-project-128.png" alt="this"></a><div id="undeline1"></div></li> <li><a id="john" ><img id="aila1" src="https://cdn0.iconfinder.com/data/icons/thin-time-date/57/thin-026_time_clock_watch-256.png" alt="thisone"></a></li> <li><a id="nate" ><img id="aila2" src="https://cdn0.iconfinder.com/data/icons/cosmo-mobile/40/book-512.png" alt="thisone2"></a></li> </ul> <div id="underline1"></div> <div class="about-andrew hide" id="air"> <div id="div0" class="ui-corner-all" style=""> <div id="div0-1" style="width:50%;float:left;"> <p id="div0-1-p1"> <b>$ 200</b> Mn <br/>Sales Pipeline</p> </div> <div id="div0-2" style="width:50%;float:right;"> <p id="div0-1-p2"><b>15</b> Active <br/>opportunities </p> </div> </div> <div id="div2" class="ui-corner-all" > <p>This is P1 </p> </div> <div id="div1" class="ui-corner-all" > <p>This is P2 </p> </div> <div id="div2" class="ui-corner-all" > <p>This is P3 </p> </div> <div id="div1" class="ui-corner-all" > <p>This is P4 </p> </div> <div id="div3" class="ui-corner-all"> <p> This is the last DV </p> </div> </div><!-- A content --> <div class="about-john hide"> <h3>CLOCK</h3> <p>THIS IS CLOCK CLICKED</p> </div> <div class="about-nate hide"> <h3>BOOK</h3> <p>THIS IS BOOK CLICKED</p> </div> </body> </html>

Answer 1

try this change your jquery code like this:- 试试这个改变你的jQuery代码是这样的：

$(document).ready(function(){
  var flag;
  $('.au-img a').on("click", function(e) {

  var $this = $(this),
  $id = $this.attr('id'),
  $class = '.' + $('.about-' + $id).attr('class').replace('hide', '');

  $('.default-text').addClass('hide');
  $('.about-' + $id).removeClass('hide');
  $('div[class*=about]').not($class).addClass('hide');
  $(this).parent().css( "background-color", "cyan" );
  $(flag).parent().css( "background-color", "#E6E6E6" );
  $('#undeline1').remove();
  $(this).parent().append('<div id="undeline1"></div>');    

  flag=this;
 });
});

and css:- 和CSS：

#undeline1 {
background: none repeat scroll 0 0 red;
height: 4px;
}

Demo 演示

Answer 2

Remove <div id="underline1"></div> from you HTML. 从您的HTML中删除<div id="underline1"></div> 。 You need not to add div to show border only. 您无需添加div仅显示边框。

Chk this: DEMO Chk this： DEMO

JS JS

$('.au-img li').on("click", function(e) {
    $(this).addClass('active').siblings().removeClass('active');    
});

CSS CSS

.active{
      border-bottom:4px solid red;
}

HTML HTML

<ul class="au-img" >
    <li class="active"><a id="andrew" ><img id="aila" src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/grid-layout-project-128.png" alt="this"></a></li>
  <li><a id="john" ><img id="aila1" src="https://cdn0.iconfinder.com/data/icons/thin-time-date/57/thin-026_time_clock_watch-256.png" alt="thisone"></a></li>
  <li><a id="nate" ><img id="aila2" src="https://cdn0.iconfinder.com/data/icons/cosmo-mobile/40/book-512.png" alt="thisone2"></a></li>
</ul>



<div class="about-andrew hide" id="air">
      <div id="div0" class="ui-corner-all" style="">
        <div id="div0-1" style="width:50%;float:left;">
                    <p id="div0-1-p1"> <b>$ 200</b> Mn <br/>Sales Pipeline</p>
        </div>
        <div id="div0-2" style="width:50%;float:right;">
                    <p id="div0-1-p2"><b>15</b> Active <br/>opportunities </p>
        </div>
    </div>


  <div id="div2" class="ui-corner-all" >
      <p>This is P1 </p>
  </div>

  <div id="div1" class="ui-corner-all" >
    <p>This is P2 </p>
    </div>


    <div id="div2" class="ui-corner-all" >
      <p>This is P3 </p>
 </div>

 <div id="div1" class="ui-corner-all" >
    <p>This is P4 </p>
    </div>

    <div id="div3" class="ui-corner-all">
    <p> This is the last DV </p>
    </div>
</div><!-- A content  -->

<div class="about-john hide">
  <h3>CLOCK</h3>
  <p>THIS IS CLOCK CLICKED</p>
</div>
<div class="about-nate hide">
  <h3>BOOK</h3>
  <p>THIS IS BOOK CLICKED</p>
</div>

如何在菜单栏中的活动菜单下方添加下划线（在ul中）

问题描述

2 个解决方案

解决方案1
1 2014-11-06 06:38:57

解决方案2
0 2014-11-06 06:49:36

如何在菜单栏中的活动菜单下方添加下划线（在ul中）

问题描述

2 个解决方案

解决方案1 1 2014-11-06 06:38:57

解决方案2 0 2014-11-06 06:49:36

解决方案1
1 2014-11-06 06:38:57

解决方案2
0 2014-11-06 06:49:36