显示/隐藏点击

Question

I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!

Answer 1

You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?

so your html will contain:

<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>

Your CSS would contain:

div.hide { display:none; [your properties]; }
div.show { [your properties]; }

and the your JS would look something like this:

function showText(show,hide)
{
    document.getElementById(show).className = "show";
    document.getElementById(hide).className = "hide";
}

Does this help at all?

Answer 2

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>

in javascript you can do this if you use jQuery :

function myLinkButtonClick()
{
    $("#myDiv").hide();
}

or

function myLinkButtonClick()
{
    $("#myDiv").show();
}

Alternatively you can do .toggle

function myLinkButtonClick()
{
    $("#myDiv").toggle();
}

Answer 3

Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.

It is very possible to achieve this however. Here is one possible solution:

<a href="#" onclick="show('div1')">Link1</a>
<a href="#" onclick="show('div2')">Link2</a>

<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>

<script>

    var currentDiv = document.getElementById("div1");
    function show(divID) {

        var div = document.getElementById(divID);

        currentDiv.style.display = "none";
        div.style.display = "block";

        currentDiv = div;
    }

</script>

The script tag defines a variable and a function: currentDiv , which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.

The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.

In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.

No, you do not need JQuery to do this, but it can help.

Answer 4

There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:

http://api.jquery.com/slideToggle/

Answer 5

This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.

Here is a link: Jquery Tabs

Answer 6

Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).