javascript - 如何使右侧指令框上的箭头指向左侧焦点所在的字段？

Question

我有一个带有表单的网页。该页面分为左右两列。表格在左侧，右侧有一个带有说明的框。

目前，右侧的框由 cssarrowplease 组成#arrow_box div 配置为向左的箭头。

我希望该箭头移动，以便它指向左侧具有焦点的表单字段。

通过使用 CSS，我可以手动上下移动箭头。但是，我不确定如何在我使用 Tab 键或单击以关注每个不同的表单字段时动态地进行这些移动。

Answer 1

如果我没理解错的话，你可以为每个位置添加类，当焦点在某些表单域上时，可以根据样式更改#arrow_box div的类。

虽然这是一个冗长的方法。

CSS 类 1:

.arrow_box 
{ 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before 
{ 
    left: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 
.arrow_box:after 
{ 
    border-color: rgba(136, 183, 213, 0); 
    border-left-color: #88b7d5; 
    border-width: 10px; 
    top: 10%; 
    margin-top: -10px; 
} 
.arrow_box:before 
{ 
    border-color: rgba(194, 225, 245, 0); 
    border-left-color: #c2e1f5; 
    border-width: 16px; 
    top: 10%; 
    margin-top: -16px; 
}

和 CSS 类 2:

唯一的变化是类名和以下内容: 示例:

.arrow_box
{
    top: 10%;
}

成为

.arrow_box_element2
{
    top: 20%;
}

假设您有一个 JavaScript 方法，当 Focus 位于 element 上时调用该方法:

function onFocusElement1()
{
     $("#arrow_box").attr('class', 'arrow_box');
}

function onFocusElement2()
{
     $("#arrow_box").attr('class', 'arrow_box_element2');
}

希望这有帮助:)