javascript - 当它具有选定的类时在文本下划线或/并单击它并将文本垂直居中放置

Question

你可以在这里找到 jsfiddle:https://jsfiddle.net/flamant/6zb8vne5/13/ .

下划线:

.selected::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -.5em;            /* décalage vers le bas à ajuster */
  right: 50%;
  left: 50%;
  height: 2px;
  background: black;
  transition: all .5s;      /* pour un petit effet */
}

#searchBuy.selected::before {
  right: 0.5em;
  left: 0.5em;
}
#searchRent.selected::before { 
  right: 0.5em;
  left: 0.5em;
}

垂直居中

.row1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 10px;
  height: 40px;
  box-shadow: 0px 1px 1px black;
}

#vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
}

  function addClassSelected(event) {
  	event = event || window.event;
    $("#searchBuy").removeClass("selected");
    $("#searchRent").removeClass("selected");

    console.log('ca passe applyClickCss');
    let target = $(event.target);
         
    console.log(target);
    target.toggleClass("selected");
  }

.selected {
	color: black;
	opacity: 1;
	font-weight: 700;
	font-family: Poppins;
	font-size: 16px; 
}

.colorOpacity10 {
	color: black;
	opacity: 1;
	font-weight: normal;
	font-family: Poppins;
	font-size: 16px; 
}

.selected::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -.5em;            /* décalage vers le bas à ajuster */
  right: 50%;
  left: 50%;
  height: 2px;
  background: black;
  transition: all .5s;      /* pour un petit effet */
}

.row1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 10px;
  height: 40px;
  box-shadow: 0px 1px 1px black;
}

#vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
}

#searchBuy.selected::before {
  right: 0.5em;
  left: 0.5em;
}
#searchRent.selected::before { 
  right: 0.5em;
  left: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="row1 colorOpacity10">
		<div class="vertical-center">
			<span id="searchBuy" style="margin-left:20px" class="selected"  onclick="addClassSelected(event)">Buy</span> 
		</div>
		<div class="vertical-center">
			<span id="searchRent" style="margin-left:40px" onclick="addClassSelected(event)">Rent</span>
		</div> 
	</div>

我尝试将两个文本跨度垂直居中，并在选择了类和/或单击它时为文本加下划线，如下所示:

Answer 1

只需添加 background: linear-gradient(to right, #F16A70, #F16A70) no-repeat; 背景大小:100% 3px； 背景位置:中心底部； padding: 3px; to selected class

function addClassSelected(event) {
  	event = event || window.event;
    $("#searchBuy").removeClass("selected");
    $("#searchRent").removeClass("selected");

    console.log('ca passe applyClickCss');
    let target = $(event.target);
         
    console.log(target);
    target.toggleClass("selected");
  }

.selected {
	color: black;
	opacity: 1;
	font-weight: 700;
	font-family: Poppins;
	font-size: 16px;
  background: linear-gradient(to right, #F16A70, #F16A70) no-repeat;
  background-size: 100% 3px;
  background-position: center bottom;
  padding: 3px;
}

.colorOpacity10 {
	color: black;
	opacity: 1;
	font-weight: normal;
	font-family: Poppins;
	font-size: 16px; 
}

.selected::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -.5em;            /* décalage vers le bas à ajuster */
  right: 50%;
  left: 50%;
  height: 2px;
  background: black;
  transition: all .5s;      /* pour un petit effet */
  
}

.row1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 10px;
  height: 40px;
  box-shadow: 0px 1px 1px black;
}

#vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
}

#searchBuy.selected::before {
  right: 0.5em;
  left: 0.5em;
}
#searchRent.selected::before { 
  right: 0.5em;
  left: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row1 colorOpacity10">
		<div class="vertical-center">
			<span id="searchBuy" style="margin-left:20px" class="selected"  onclick="addClassSelected(event)">Buy</span> 
		</div>
		<div class="vertical-center">
			<span id="searchRent" style="margin-left:40px" onclick="addClassSelected(event)">Rent</span>
		</div> 
	</div>