Question

好的，所以我有一个页面上有四个链接。现在，我没有将链接链接到单独的页面，而是希望保留在同一页面上，但是在此页面上交换div的内容，因为它是相同的页面，但中间的内容不同。我在Wordpress工作，我已经为不同文件中的中间内容创建了单独的部分，让我们称之为cont_one.php，cont_two.php，cont_three.php，cont_four.php。

那么，如果我使用PHP或jQuery，我该怎么做呢？我如何创建一个if语句，知道链接是否被点击然后交换内容？我并不是要求你为我做所有的工作，虽然我很欣赏一个演示，但如果你至少能告诉我我在寻找什么，我将不胜感激，因为我不知道从哪里开始。感谢

Answer 1

这是一个使用jquery

更改div内容的简单解决方案

<div>
    <ul>
     <li id="opt1"><a href="">Title1</a></li>
      <li id="opt2"><a href="">Title2</a></li>
        <li id="opt3"><a href="">Title3</a></li>
     </ul>
   </div>
<div class="step1">CONTENT1</div>
<div class="step2">CONTENT1</div>
<div class="step3">CONTENT1</div>

然后是jquery

 $('#opt1').click(function(){
    $('.step1').show();
    $('.step2').hide();
    $('.step3').hide();
});
$('#opt2').click(function(){
    $('.step2').show();
    $('.step1').hide();
    $('.step3').hide();
});
$('#opt3').click(function(){
    $('.step3').show();
    $('.step2').hide();
    $('.step1').hide();
});

最后是css

   .step1 {display:show;}
    .step2 {display:none;}
    .step3 {display:none;}

Answer 2

您可以使用rstrip（页面顶部包含jQuery）。

如果元素占用文档中的空间，则认为元素可见。
不在文档中的元素被视为隐藏。

以下是一个例子：

HTML - 链接

<!-- start hidden div #1 --><div class="hiddendiv" id="hiddendiv-1"><p>1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><!-- end hidden div #1 -->

<!-- start hidden div #2 --><div class="hiddendiv" id="hiddendiv-2"><p>2 - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ips.</p></div><!-- end hidden div #2 -->

<!-- start hidden div #3 --><div class="hiddendiv" id="hiddendiv-3"><p>3 - Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p></div><!-- end hidden div #3 -->

<!-- start hidden div #4 --><div class="hiddendiv" id="hiddendiv-4"><p>4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></div><!-- end hidden div #4 -->

HTML - DIVs

.hiddendiv { 
display: none; // all hidden at start of the page
position: relative;
width: 95%;
margin: 0px auto 0;
padding: 10px 10px;
border: 1px solid #000;
}

CSS

function showonlyone(thechosenone) {
$('.hiddendiv').each(function(index) {
    if ($(this).attr("id") == thechosenone) { // which one was clicked ?
        if($(this).is(':visible')){ // the selector checks if hidden/visible
        $(this).slideUp(600); // yes = move up and hide
        } else {
        $(this).slideDown(600);  // no = move down and show
        }
        }
        else {
        $(this).slideUp(600);
        }
     });
}

的jQuery

If the content isn't 20 miles long [...] have it on the page initially and hide it. Then only show when clicked.

如@hungerstar的评论中所述，这将向您展示实现它的方法{{1}}

如果您需要从DB获取内容或加载HTML页面，将需要Ajax并且脚本将略有不同。

如果单击链接，则更改div的内容

2 个答案: