如果选择了上方选项卡，则移动边框和描述

Question

任何人都可以告诉我如何在选择.showBorder时实现移动.box-tip和.clicked。因此，当选择标签时，下面的标签将选择一个边框，上面的文字随之移动。只需要一次选择一个选项卡和一个边框。到目前为止，这是我的代码：

$(document).on("click", '.clicked', function(){
    $('.clicked').removeClass('selected');
    $(this).addClass('selected');
});

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:25px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:25px auto;padding:0;}
.showBorder { border: 3px dashed black; }

.box-tip {
  display:inline;
  margin: auto;
	position: relative;
	
 }
.numberCircle {
  border-radius: 50%;
  font-size: 12px;
  border: 5px solid #000;
  color: #fff;
  background: #000;
}

.numberCircle span {
  text-align: center;
  display: block;
}

li.selected {color:#fff;background-color:#000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="list-box">
  <li class="clicked">1</li>
  <li class="clicked">2</li>
  <li class="clicked">3</li>
  <li class="clicked">4</li>
  <li class="clicked">5</li>
  <li class="clicked">6</li>
  <li class="clicked">7</li>
  <li class="clicked">8</li>
</ul>
<div class="box-tip">
  <span class="info">Regular length for your collar size</span>
  <span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
  <li class="border">a</li>
  <li class="border">b</li>
  <li class="border showBorder">c</li>
  <li class="border">d</li>
  <li class="border">e</li>
  <li class="border">f</li>
  <li class="border">g</li>
  <li class="border">h</li>
</ul>

Answer 1

使用.index(element)获取element相对于其兄弟姐妹的位置。

使用.eq(index)将元素放在另一个元素的index位置。

所以它看起来像这样：

$(document).on("click", '.clicked', function() {
  var boxes = $('.list-box li'),
    sleeves = $('.box-sleeve li'),
    tip = $('.box-tip .info');
  var currBox = $(this),
    currSleeve = sleeves.eq(boxes.index(currBox));
  // select box and sleeve
  boxes.removeClass('selected');
  currBox.addClass('selected');
  sleeves.removeClass('showBorder');
  currSleeve.addClass('showBorder');
  // move tip
  tip.css('left', currBox.position().left - 100);
});

.container {
  /* to center both list */
  text-align: center;
}

.list-box {
  margin: 25px auto;
  padding: 0;
}

.list-box li {
  display: inline-block;
  list-style-type: none;
  padding: 1em;
  background: red;
}

.list-box li.selected {
  color: #fff;
  background-color: #000;
}

.box-sleeve {
  margin: 25px auto;
  padding: 0;
}

.box-sleeve li {
  display: inline-block;
  list-style-type: none;
  padding: 1em;
  background: red;
}

.showBorder {
  border: 3px dashed black;
}

.box-tip {
/*border: 1px solid #ddd;*/
  position: relative;
  height: 25px;
  line-height: 25px;
}

.box-tip .info {
  position: absolute;
  /* to ensure that it one liner */
  white-space: nowrap;
  /* default text position */
  left: 120px;
}

.numberCircle {
  border-radius: 50%;
  font-size: 12px;
  border: 5px solid #000;
  color: #fff;
  background: #000;
}

.numberCircle span {
  text-align: center;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- wrap everything in a container, so that we can center them -->
<div class="container">
  <ul class="list-box">
    <li class="clicked">1</li>
    <li class="clicked">2</li>
    <li class="clicked">3</li>
    <li class="clicked">4</li>
    <li class="clicked">5</li>
    <li class="clicked">6</li>
    <li class="clicked">7</li>
    <li class="clicked">8</li>
  </ul>
  <div class="box-tip">
    <!-- this will be absolutely positioned to have flexibility in moving it -->
    <span class="info">Regular length for your collar size <span class="numberCircle">?</span></span>

  </div>
  <ul class="box-sleeve">
    <li class="border">a</li>
    <li class="border">b</li>
    <li class="border">c</li>
    <li class="border">d</li>
    <li class="border">e</li>
    <li class="border">f</li>
    <li class="border">g</li>
    <li class="border">h</li>
  </ul>
</div>

修改

您可以使用.position()获取所选框的位置，并使用它来计算.box-tip的位置。但是，您会注意到它需要对HTML和CSS进行一些更改（请参阅注释）以确保它始终居中。