如何在菜单栏中的活动菜单下方（在ul内）放置下划线

我正在制作一个菜单栏，每次点击时都会打开一个不同的页面。我已经使用代码来改变点击mwnu的背景颜色，但是我想要的仅仅是获得下划线（在UL块内：代码附加）以显示该菜单是活动的而不是完全改变背景。帮我。如何在菜单栏中的活动菜单下方（在ul内）放置下划线

我使用下面的代码：

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>

来源

2014-11-06 vaibhav

尝试这种改变这样的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

来源

2014-11-06 06:38:57

这是给tab1的默认下划线，你能提出一个答案，它不会给出任何默认行吗？ – vaibhav 2014-11-06 06:45:26

@vaibhav从2个地方的html中删除此div'

' – 2014-11-06 06:48:28

http://jsfiddle.net/yqLtwo98/2/ – 2014-11-06 06:50:31

从你的HTML删除<div id="underline1"></div>。你不需要添加div来仅显示边框。

清洁香港这样的：DEMO

$('.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>

来源

2014-11-06 06:49:36

如何在菜单栏中的活动菜单下方（在ul内）放置下划线

回答

相关问题