javascript - Showhide element based on clicked href of link - Stack Overflow

admin管理员组

文章数量:1287251

I am new to JavaScript and actually quite desperate by now

I have an HTML file that:

1. gets data from an XML file and displays them in various divs (e.g. )
2. these divs are hidden (by default) by a class name (class='box')
3. when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.
4. then I add a new class name ('show') - so that this element shows up!

If you run the code you will see that every time you click on a link a new div is displayed...

So current problems:

1. replace already shown divs with the new clicked ID so that only one div shows up every time.
2. How can I avoid inserting the onClick event in every single tag - and make this more automated?

---

My code is as follows:

function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);

document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";   
document.getElementById(newlinkTo).className += " Show";

return true;
}

<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>

<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>

I am new to JavaScript and actually quite desperate by now

I have an HTML file that:

1. gets data from an XML file and displays them in various divs (e.g. )
2. these divs are hidden (by default) by a class name (class='box')
3. when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.
4. then I add a new class name ('show') - so that this element shows up!

If you run the code you will see that every time you click on a link a new div is displayed...

So current problems:

1. replace already shown divs with the new clicked ID so that only one div shows up every time.
2. How can I avoid inserting the onClick event in every single tag - and make this more automated?

---

My code is as follows:

function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);

document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";   
document.getElementById(newlinkTo).className += " Show";

return true;
}

<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>

<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>

• javascript
• html
• css

Share Improve this question Follow edited Jun 26, 2012 at 16:26 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Jun 26, 2012 at 15:47 katekate 3311 gold badge11 silver badge44 bronze badges 1

• 2 Might not be of interest, but JQuery is a relatively simple way of achieving these things. – Danny Commented Jun 26, 2012 at 15:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I'm not usually into using jQuery everywhere, but with it you could just do:

<a class='showContent' data='b0'/>

Your js:

var selected;

$('a.showContent').on('click',function(e){
     var toShow = $(this).attr('data');
     if(selected!==undefined) selected.removeClass('Show');
     selected = $(div+'#'+toShow);
     selected.addClass('Show');
 });

Not sure if this is what you want, but thought I'd suggest it.

There is a WAY cleaner way to do this:

This is just my quick example, it can get EVEN cleaner than this, but this works for your case:

HTML:

<a href="#b0" id="b0-link" class="link" rel="b0">link b0</a>

<a href="#b1" id="b1-link" class="link" rel="b1">link b1</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>​​​​​​​​​

CSS:

#b0 { display: none; }

#b1 { display: none; }

a, div.text_content { display: inline; padding: 0 10px; }

JQUERY:

​$('.link').click(function(){
    var id = $(this).attr("rel");

    $('#'+id).slideToggle('slow');                      
});

​ Each link would have to have a REL attribute that is the same as the ID of the div element that you are trying to show.

Here is a JSFiddle to this example in action:

http://jsfiddle/CUJSM/5/

This sort of thing is not hard to do without jQuery.

I would remend using a hash-bang (#!) for Javascript activated links to keep it separate from other possible links with hashes. (script is at the bottom)

<div id="nav-links">

    <a href="#!b0">
    <div id="text_content"> link2 </div>
    </a>

    <a href="#!b1">
    <div id="text_content"> link 1 </div>
    </a>

</div>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>

<script type="text/javascript">

    var links = document.getElementById('nav-links').getElementsByTagName('a');
    for(var i = 0, link; link = links[i]; i++) {
        link.onclick = showContent;
        // Hide content divs by default
        getContentDiv(link).style.display = 'none';
    }
    // Show the first content div
    if(links.length > 0) showContent.apply(links[0]);

    var current;

    function showContent() {

        // hide old content
        if(current) current.style.display = 'none';

        current = getContentDiv(this);
        if(!current) return true;

        //current.innerHTML = "This is where the xml variable content should go";
        current.style.display = 'block';

        return true;

    }

    function getContentDiv(link) {

        var linkTo = link.getAttribute('href');

        // Make sure the link is meant to go to a div
        if(linkTo.substring(0, 2) != '#!') return;
        linkTo = linkTo.substring(2);

        return document.getElementById(linkTo);

    }

</script>​

本文标签： javascriptShowhide element based on clicked href of linkStack Overflow