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

Question

I would like to create links to content that is hidden by a show/hide java script. There are three divs within each hidden content with videos and text to which I would like create links; eg, create a link to the "example" div shown in the code below. It doesn't have to be linked directly to each div. Creating a link destination above the div would be even better. I hope my question makes sense.

The code I am using for the show/hide works perfectly. This is a generic version of that code:

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

Hoping that I understand your question. Study the example below

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> 

Note: Had to put this together to help you understand how you can achieve what you want, so you have to make necessary changes to get it to work for you.