SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Help me list link with javascript ??

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vlbknl2 View Post
    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);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okies, thanks u very much!!!

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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);

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    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'),
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oki, thanks u very much


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •