活动边框（.showBorder）在文本移动时居中

// Get references to the two sets of boxes var numbers = document.querySelectorAll(".clicked"); var letters = document.querySelectorAll(".border"); // Turn each node list into proper arrays: numbers = Array.prototype.slice.call(numbers); letters = Array.prototype.slice.call(letters); // Loop through all the number boxes numbers.forEach(function(box, index) { // Set up the click event handlers for all the number boxes box.addEventListener("click", function() { // Remove borders from each of the letter boxes letters.forEach(function(box) { box.classList.remove("showBorder"); }); // Apply the border to only the one clicked element var info = document.getElementsByClassName('box-tip')[0]; info.style.left = 10 + (index * 45) + 'px'; info.style.visibility = 'visible'; letters[index].classList.add("showBorder"); }); }); $(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:15px auto;padding:0;} .box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;} .box-sleeve {margin:15px auto;padding:0;} .showBorder { border: 3px dashed black; } .box-tip { display:inline; margin: auto; position: relative; visibility: hidden; } .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;} 

  
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
 
 Regular length for your collar size ? 
 
 
a
 
b
 
c
 
d
 
e
 
f
 
g
 
h
  

当文本移动时，活动信箱（.showBorder）需要位于文本的中心“衣领大小的常规长度”。 文本开始位置应按原样左对齐。 为了以边框为中心，它只需在点击字母’C’时开始移动。 欢迎所有建议。 这是我的代码：

 // Get references to the two sets of boxes var numbers = document.querySelectorAll(".click"); var letters = document.querySelectorAll(".border"); // Turn each node list into proper arrays: numbers = Array.prototype.slice.call(numbers); letters = Array.prototype.slice.call(letters); // Loop through all the number boxes numbers.forEach(function(box, index) { // Set up the click event handlers for all the number boxes box.addEventListener("click", function() { // Remove borders from each of the letter boxes letters.forEach(function(box) { box.classList.remove("showBorder"); }); // Apply the border to only the one clicked element var info = document.getElementsByClassName('box-tip')[0]; info.style.left = 10 + (index * 45) + 'px'; info.style.visibility = 'visible'; letters[index].classList.add("showBorder"); }); }); 

 .list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;} .list-box {margin:50px auto;padding:0;} .box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;} .box-sleeve {margin:50px auto;padding:0;} .showBorder { border: 3px dashed black; } .box-tip { display:inline; margin: auto; position: relative; visibility: hidden; } .numberCircle { border-radius: 50%; font-size: 12px; border: 5px solid #000; color: #fff; background: #000; } .numberCircle span { text-align: center; display: block; } 

 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
 
 Regular length for your collar size ? 
 
 
a
 
b
 
c
 
d
 
e
 
f
 
g
 
h
  

Answer 1

而不是info.style.left = 10 + (index * 45) + 'px';

  if (index > 2) { info.style.left = 10 + ((index - 3) * 45) + 'px'; } else { info.style.left = 0 + 'px'; } 

这是它的小提琴： https： //jsfiddle.net/flish/fm6821d5/现在更新，效果更好