javascript - 如何创建指向由显示/隐藏 javascript 隐藏的内容的链接？

Question

我想创建指向被显示/隐藏 java 脚本隐藏的内容的链接。每个隐藏内容中有三个 div，其中包含我想创建链接的视频和文本；例如，创建一个链接到下面代码中显示的“示例”div。它不必直接链接到每个 div。在 div 上方创建链接目标会更好。我希望我的问题是有道理的。

我用于显示/隐藏的代码工作得很好。这是该代码的通用版本:

HTML

<p>***Visible content***
<a href="#" id="example-show" class="showLink" 
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
    <p>***Hidden content***</p>
    <p><a href="#" id="example-hide" class="hideLink" 
    onclick="showHide('example');return false;">Hide this content.</a></p>

CSS

.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666; 
}
a.showLink, a.hideLink 
{
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url('down.gif') no-repeat left; 
}
a.hideLink {
background: transparent url('up.gif') no-repeat left; 
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; 
}

JavaScript

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}

Answer 1

希望我理解你的问题。研究下面的例子

HTML

$(document).ready(function() {
    $('li').click(function () {
        $('.content:visible').hide(); // hides the visible content before 
        $('.content').eq($(this).index()).show(); // shows the corresponding content
    });
    });

li  {
    display: inline;
    text-transform: uppercase;
    font-family: calibri;
    height: 24px;
}

.content {
    font-size: 60px;
    color: red;
}

.content:not(:first-of-type) {
    display: none; /* Hides all but the first .content div */
}



li a {
    padding: 0 15px 0 15px;
    text-decoration: none;
    line-height: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    
    <li> <a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    
</ul>



<div class="content"> Content One</div>
    
<div class="content"> Content Two</div>

<div class="content"> Content Three</div>

<div class="content"> Content Four</div>

注意:必须将它们放在一起以帮助您了解如何实现您想要的，因此您必须进行必要的更改才能让它为您工作。