如何在菜单栏中的活动菜单下面放置一个下划线（在英国境内）

时间：2014-11-06 06:30:07

标签： jquery html css

我正在创建一个菜单栏，每次点击时都会打开一个不同的页面。我已经使用代码来更改单击mwnu的背景颜色，但我想要的是获得下划线（在UL块中：附加代码）以显示菜单处于活动状态而不是完全更改backgroungd。帮我 。

我使用以下代码：

HTML与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>

2 个答案:

答案 0 :(得分：1)

尝试这样更改你的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;
 });
});

和css： - 

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

Demo

答案 1 :(得分：0)

从您的HTML中删除<div id="underline1"></div>。您无需添加div来仅显示边框。

Chk this： DEMO

<强> JS 

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

<强> CSS 

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

<强> 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>
相关问题
最新问题