Help me list link with javascript ??

**vlbknl2** · Mar 21, 2012 03:11

I writed a file like :

<a href="javascript:showList('m1', 'block');">Menu1</a>|| <a href="javascript:showList('m2', 'block');">Menu2</a>

<script type="text/javascript">
function showList(idl, stl) {
document.getElementById(idl).style.display = stl;
}
</script>

<ul id="m1" style="display:none">
<li>Link1</li>
<li>Link2</li>
</ul>

<ul id="m2" style="display:none">
<li>Link3</li>
<li>Link4</li>
</ul>

When I click "menu1" then it will show "link1, link 2"
When I click "menu2" then it will show "link3, link 4"
I want to when you click 'menu1' will show "link 1, link2" and you click 'menu2' will show 'link 3,link4' and hiden 'link1, link2'

Help me!
Thanks Everyone

**paul_wilkins** · Mar 21, 2012 04:28

Originally Posted by vlbknl2

Help me!

Here's one way that it might be done.

HTML Code:

<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
    <a href="#m1">Menu1</a> || <a href="#m2">Menu2</a>
</div>

<ul id="m1">
<li>Link1</li>
<li>Link2</li>
</ul>

<ul id="m2">
<li>Link3</li>
<li>Link4</li>
</ul>

<script src="script.js"></script>
</body>
</html>

Code css:

.hidden {
    display: none;
}

Code javascript:

function hideSections(menu) {
    var links = menu.querySelectorAll('a'),
        i,
        id;
    for (i = 0; i < links.length; i += 1) {
        id = links[i].href.split('#')[1];
        document.getElementById(id).className = 'hidden';
    }
}
 
function showSection(link) {
    var id = link.href.split('#')[1];
    document.getElementById(id).className = '';
}
 
function handleLinkEvent(callback) {
    return function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (targ.nodeType === 3) {
            // fix Opera textnode bug
            targ = targ.parentNode;
        }
        if (targ.nodeName === 'A') {
            callback.call(this, targ);
        }
        return false;
    };
}
 
var nav = document.getElementById('nav');
nav.onclick = handleLinkEvent(function (targ) {
    hideSections(this);
    showSection(targ);
});
hideSections(nav);

**vlbknl2** · Mar 21, 2012 06:58

okies, thanks u very much!!!

**vlbknl2** · Mar 21, 2012 07:12

Originally Posted by paul_wilkins

Here's one way that it might be done.
Your's file don't run with Internet Explorer
Thanks you!

HTML Code:

<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
    <a href="#m1">Menu1</a> || <a href="#m2">Menu2</a>
</div>

<ul id="m1">
<li>Link1</li>
<li>Link2</li>
</ul>

<ul id="m2">
<li>Link3</li>
<li>Link4</li>
</ul>

<script src="script.js"></script>
</body>
</html>

Code css:

.hidden {
    display: none;
}

Code javascript:

function hideSections(menu) {
    var links = menu.querySelectorAll('a'),
        i,
        id;
    for (i = 0; i < links.length; i += 1) {
        id = links[i].href.split('#')[1];
        document.getElementById(id).className = 'hidden';
    }
}
 
function showSection(link) {
    var id = link.href.split('#')[1];
    document.getElementById(id).className = '';
}
 
function handleLinkEvent(callback) {
    return function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (targ.nodeType === 3) {
            // fix Opera textnode bug
            targ = targ.parentNode;
        }
        if (targ.nodeName === 'A') {
            callback.call(this, targ);
        }
        return false;
    };
}
 
var nav = document.getElementById('nav');
nav.onclick = handleLinkEvent(function (targ) {
    hideSections(this);
    showSection(targ);
});
hideSections(nav);

**paul_wilkins** · Mar 21, 2012 07:18

If you want to use querySelector or querySelectorAll on less capable web browsers, you'll be needing to use a polyfill, which allows those less capable web browser to also use such features.

querySelector/querySelectorAll Polyfill

Or, you can replace this part:

Code:

var links = menu.querySelectorAll('a'),

with:

Code:

var links = menu.getElementsByTagName('a'),

**vlbknl2** · Mar 21, 2012 09:57

oki, thanks u very much

User Tag List

Thread: Help me list link with javascript ??

Thread Tools

Display

Help me list link with javascript ??

Bookmarks

Bookmarks

Posting Permissions