1

我创建了一个类似 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

4

3 回答 3

5

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

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');
})
于 2013-07-10T18:14:02.873 回答
3

如果你只想用 css 来做：

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

中间水平线使用 Sotiris 解决方案。 我可以用 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;
}
于 2013-07-10T18:22:29.267 回答
2

I know you've already found a solution but for my own practice I came up with one too. This one is pure CSS based with semantic HTML; the click functionality is implemented with JavaScript.

You can easily do it without JavaScript by adding the completed HTML class to the appropriate list items.

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

Adjust the positioning and borders as necessary.

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

Of course if you need to support IE < 9, you're SOL on this one.

于 2013-07-10T18:57:31.590 回答