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>

css

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

Answer 2

如果您只想使用css：

小提琴：http://jsfiddle.net/kCGt2/

在中间水平线使用Sotiris解决方案。 can I center a border with CSS

HTML：

<div class="steps">
    1
</div>
<div class="hr">
    <div class="line"></div>
</div>
<div class="steps">
    2
</div>

CSS：

div {
    float: left;
}

.hr {
    height:15px;
    padding-bottom: 15px;
    width: 25%;
    float: left;
}

.line {
    width: 100%;
    float: left;
    margin-top:13px;
    border-bottom: 2px solid black;
}

.steps {
    width: 30px;
    height: 30px;
    border-radius:50%;
    background: red;
    color: white;
    text-align: center;
}

Answer 3

我知道你已经找到了解决方案但是对于我自己的练习我也提出了一个解决方案。这是一个基于语义HTML的纯CSS;点击功能是用JavaScript实现的。

通过将completed HTML类添加到相应的列表项，您可以轻松地在没有JavaScript的情况下执行此操作。

See the jsFiddle for this example.

HTML

<ol>
    <li style='background: orange'></li>
    <li style='background: lightblue'></li>
    <li style='background: lime'></li>
    <li style='background: yellow'></li>
</ol>

CSS

根据需要调整定位和边框。

ol {
    counter-reset: steps;
    display: block;
    width: 100%;
    list-style-position: inside;
    font-family:'Segoe UI', sans-serif;
}
ol > li {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    left: 10%;
    width: 20%;
    height: 0;
    border: 0 solid #000;
    line-height: 2em;
    margin: 1em 0 0.5em 2em;
    counter-increment: steps;
}
ol > li.completed:not(:last-child) {
    border-width: 0.15em 0;
}
ol > li::before {
    position: relative;
    bottom: 1em;
    right: 1.5em;
    width: 1em;
    line-height: 1em;
    display: inline-block;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: inherit;
    border: 1px solid #000;
    border-radius: 50%;
    padding: 0.1em;
    content: counter(steps);
}
ol > li::after {
    position: relative;
    top: 1em;
    right: 50%;
    width: 5em;
    line-height: 1em;
    display: inline-block;
    text-align: center;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 0.4em;
    content: 'Step ' counter(steps);
    background-color: inherit;
    cursor: pointer;
}

JavaScript（jQuery）

$(document).ready(function () {
    $('li').click(function () {
        $(this).removeClass('completed');
        $(this).nextAll().removeClass('completed');
        $(this).prevAll('li').addClass('completed');
    });
});

当然，如果你需要支持IE＆lt; 9，你是这个人的SOL。

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

3 个答案:

HTML

CSS

JavaScript（jQuery）