Question

我知道这已被多次询问但是在阅读了几个主题后，我似乎无法正确组合HTML / CSS和JS，以便为我的面板发生所需的效果，我觉得我到处都是在圈子里。

我认为我已经正确设置了HTML，以便隐藏额外的div，但我认为这是我的CSS和JS的问题因为我不能让它在点击li图标时交换。

情况：我有一个水平时间轴，有四个点，我想充当可点击元素，根据点击的点，将确定显示哪个隐藏内容面板。

默认显示的Div 1内容
点击第2页，显示div 2内容
点击第3页，显示div 3内容
点击第4页和第4页显示的内容

也不确定如何让时间轴在一条连续线上。它像李一样工作得很好，但是当我把它包裹起来时，它变得偏斜了。

非常感谢任何有关如何使其发挥作用的帮助，提示或指示。

干杯......布雷特

HTML

<div id="content">
    <div id="icon">
        <img src="http://www.arteria-glh.com/wp-content/uploads/2015/07/design-centre.png">
    </div>
    <div id="copy">
        <h3>Design Centre Content #1</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
    </div>
</div>
<div id="content-2" class="hidden">
    <div id="icon">
        <img src="http://www.arteria-glh.com/wp-content/uploads/2015/07/design-centre.png">
    </div>
    <div id="copy">
        <h3>Design Centre Content #2</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
    </div>
</div>
<div id="content-3" class="hidden">
    <div id="icon">
        <img src="http://www.arteria-glh.com/wp-content/uploads/2015/07/design-centre.png">
    </div>
    <div id="copy">
        <h3>Design Centre Content #3</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
    </div>
</div>
<div id="content-4" class="hidden">
    <div id="icon">
        <img src="http://www.arteria-glh.com/wp-content/uploads/2015/07/design-centre.png">
    </div>
    <div id="copy">
        <h3>Design Centre Content #4</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
    </div>
</div>

CSS

ol.progtrckr {
    display: table;
    list-style-type: none;
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}

ol.progtrckr li {
    display: table-cell;
    text-align: center;
    line-height: 3em;
}

ol.progtrckr[data-progtrckr-steps="4"] li { 
    width: 25%; 
}

ol.progtrckr li.progtrckr-done {
    color: #414042;
    font-family: open sans;
    font-weight: 900;
    font-size: 30px;
    border-bottom: 4px solid #517316;
}

ol.progtrckr li.progtrckr-todo {
    color: #fafafa; 
    font-family: open sans;
    font-weight: 900;
    font-size: 30px;
    border-bottom: 4px solid #afdf5d;
}

ol.progtrckr li:before {
    position: relative;
    bottom: -2.5em;
    float: left;
    left: 50%;
    line-height: 1em;
}

ol.progtrckr li.progtrckr-done:before {
    content: "◉";
    color: #afdf5d;
    font-size: 1.5em;
    bottom: -0.6em;
}

ol.progtrckr li.progtrckr-todo:before {
    content: "◉";
    color: #dff6b8;
    font-size: 1.5em;
    bottom: -0.6em;
}

#content {
    margin-top: 50px;
    margin-left: 15%;
}

#content-2 {
    margin-top: 50px;
    margin-left: 15%;
}

#content-3 {
   margin-top: 50px;
   margin-left: 15%;
}

#content-4 {
    margin-top: 50px;
    margin-left: 15%;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div#icon {
    width: 15%;
    float: left;
}

div#copy {
    margin-left: 20%;
    margin-right: 20%;
    border-radius: 8px;
    padding-bottom: 20px
}

h3 {
    padding-top: 10px;
    padding-left: 10px;
    color: #78a22f;
    size: 24px;
}

p {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    color: #fafafa;
}

.hidden {
    display: none;
}

JS

$("div.containter ul li").each(function(){
$(this).onclick(function(){

   $("div.content").hide();

  $("div" + $(this).attr("href")).show();

});
});

Answer 1

请尝试此

我做了一些HTML更改。 ID是唯一的，不应该有任何重复的ID。

$(".progtrckr a").click(function(){
    var currentDiv = $(this).attr("href");
    $('.data').each(function(){
        if(! $(this).hasClass('hidden')){
            $(this).addClass('hidden')
        }
    });
    $(''+currentDiv+'').removeClass('hidden'); 
});

DEMO

Answer 2

几个问题：

将<a>标记包含在<li>内，而不是相反。这应该使时间轴再次成为一条直线。

默认情况下，

<a>代码为display: inline，因此要让它们实际显示，您需要在其中包含文字，否则请将其设置为display: inline-block或{{ 1}}

然而，这样做会弄乱你的时间轴上的点，所以你需要清理你的CSS，以便它适用于此

就jquery而言，click事件处理程序是

block

这是一个关于如何点击按钮并显示相应数据的简单示例：

http://jsfiddle.net/7zm8mawh/

单击时交换div内容

2 个答案: