使用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

这里有一个快速的小提琴.你必须设计它并调整定位和所有这些,但它应该让你开始.

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');
})