个人中心
gpt4 book ai didi

jquery - 如何在菜单栏中的事件菜单下方添加下划线(英国境内)

转载 作者：太空宇宙 更新时间：2023-11-04 12:42:20 25 4
gpt4 key购买 nike

我正在制作一个菜单栏，每次单击时都会打开不同的页面。我已经使用代码更改了单击 mwnu 时的背景颜色，但我想要的只是获得一个下划线(在 UL block 内:附加代码)以显示菜单处于事件状态而不是完全更改 backgroungd 。帮我 。

我正在使用以下代码:

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>

最佳答案

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

关于jquery - 如何在菜单栏中的事件菜单下方添加下划线(英国境内)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26773079/

25 4 0
文章推荐： c++ - 在 vector 结构中显示 vector 结构
文章推荐： java - 如何在Aspose Java中从Word文档中删除特定页面？
文章推荐： linux - ./在 linux 中的命令名称是什么？
文章推荐： javascript - 如何替换handsontable中一列中的所有内容？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com