jquery - 使用 css/jQuery 在两个元素之间添加链接线

Question

我创建了一个像 UI 一样的向导(如下截图)。但我不确定当步骤 1 上的用户按下下一步并导航到步骤 2 时，如何添加一条连接点 1 到 2 的线，并用红色框突出显示。是否可以使用 CSS/jQuery？我用谷歌搜索但找不到任何关于如何解决这个问题的信息。任何有关如何执行此操作的指示也会有所帮助。谢谢!

 <table width="100%">

        <tr>
            <td align="center" width="20%">
                <div class="circleBase numberDiv1">
                    <font class="ft1">1</font>
                </div><br/>
                <div  id="myNewLink1" >
                    <font class="ft">step 1</font>
                </div>
            </td>
            <td align="center" width="20%">
                <div class="circleBase numberDiv2">
                    <font class="ft1">2</font>
                </div><br/>
                <div href="#" id="myNewLink2" >
                    <font class="ft">step 2</font>
                </div>
            </td>
            <td align="center" width="20%">
                <div class="circleBase numberDiv3">
                    <font class="ft1">3</font>
                </div><br/>
                <div href="#" id="myNewLink3" >
                    <font class="ft">step 3</font>
                </div>
            </td>
            <td align="center" width="20%">
                <div class="circleBase numberDiv4">
                    <font class="ft1">4</font>
                </div><br/>
                <div href="#" id="myNewLink4" >
                    <font class="ft">step 4</font>
                </div>
            </td>    
       </tr>
    </table>

Answer 1

这里有一个快速的 fiddle 给你。您必须对其进行样式设置并调整位置等等，但它应该可以帮助您入门。

http://jsfiddle.net/WtPQE/

CSS

.line-linkage {
    width: 92%;
    height: 0px;
    border: 1px solid #000;
    position: relative;
    top: -58px;
    left: 52%;
    z-index: -1000;
}

.hidden {
    visibility: hidden;
}

js

$('.line-linkage').addClass('hidden');

$('.ft').on( 'click', function () {
    $(this).parent().next('.line-linkage').toggleClass('hidden');
})