Javascript 如果选择了上述选项卡，则移动边框和说明

有人能告诉我当选择了

。单击
时，如何移动
.showBorder
和
.box tip
。因此，当选择tab时，下面的选项卡将有一个选定的边框，上面的文本将沿着该边框移动。一次只需要选择一个选项卡和一个边框。以下是我目前的代码：


$（文档）.on（“单击“，”.clicked'，函数（）{
$（'.clicked'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});
.list box li{显示：内联块；列表样式类型：无；填充：1em；背景：红色；}
.列表框{边距：25px自动；填充：0；}
.box套筒li{显示：内联块；列表样式类型：无；填充：1em；背景：红色；}
.box套筒{边距：25px自动；填充：0；}
.showBorder{border:3px黑色虚线；}
.盒子提示{
显示：内联；
保证金：自动；
位置：相对位置；
}
.数字圆圈{
边界半径：50%；
字体大小：12px；
边框：5px实心#000；
颜色：#fff；
背景：#000；
}
.编号圆形跨度{
文本对齐：居中；
显示：块；
}
li.selected{color:#fff；背景色：#000；}


1
2
3
4
5
6
7
8

适合您衣领尺寸的常规长度
?

a
b
c
d
e
f
g
h
用于获取
元素相对于其同级元素的位置

用于获取另一个元素中位于
索引
位置的元素

所以看起来是这样的：


$（文档）.on（“单击“，”.clicked'，函数（）{
变量框=$（'.列表框li'），
套筒=$（'.box套筒li'），
tip=$（'.box tip.info'）；
var currBox=$（此），
currSleeve=Sleets.eq（Box.index（currBox））；
//选择盒子和袖子
框。removeClass（“选定”）；
currBox.addClass（'selected'）；
袖子。移除玻璃（“showBorder”）；
currseleve.addClass（'showBorder'）；
//移动提示
css（'left'，currBox.position（）.left-100）；
});
.container{
/*将两个列表居中*/
文本对齐：居中；
}
.列表框{
保证金：25像素自动；
填充：0；
}
.列表框李{
显示：内联块；
列表样式类型：无；
填充：1em；
背景：红色；
}
.列表框li.已选定{
颜色：#fff；
背景色：#000；
}
.箱套{
保证金：25像素自动；
填充：0；
}
李先生{
显示：内联块；
列表样式类型：无；
填充：1em；
背景：红色；
}
.showBorder{
边框：3个黑色虚线；
}
.盒子提示{
/*边框：1px实心#ddd*/
位置：相对位置；
高度：25px；
线高：25px；
}
.盒子提示.信息{
位置：绝对位置；
/*以确保它是一个班轮*/
空白：nowrap；
/*默认文本位置*/
左：120px；
}
.数字圆圈{
边界半径：50%；
字体大小：12px；
边框：5px实心#000；
颜色：#fff；
背景：#000；
}
.编号圆形跨度{
文本对齐：居中；
显示：块；
}


1
2
3
4
5
6
7
8

你衣领尺寸的标准长度？

a
b
c
d
e
f
g
h

单击时移动
.box tip
是什么意思？@mikey，因此页面加载时不应激活任何内容。当1号选定字母“a”应包含边框时，当2号选定字母“b”应包含边框时。包含文本的文本框提示应该随着边框选择的移动而移动。边框应该始终是文本的中心，所以当点击字母“c”时开始移动！第二部分很棘手。@mikey是的，我同意哈！请参阅我的评论和下面的链接。我们已经取得了进展，只需将边框选择置于文本中心即可