SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    javascript tab,why the code doesn't work?

    HTML Code:
    <script type="text/javascript">
        function clicker(){
            var lier=document.getElementsByTagName("li");
            var diver=document.getElementsByClassName("web_index").getElementsByTagName("div");
    
            for(var i=0;i<lier.length;i++){
                for(j=0;j<diver.length;j++){
                    if(i==j)
                        diver[j].style.display=block;
                    }else{
                        diver[j].style.display=none;
                    }   
                }
            }
        }   
    </script>
    
    </head>
    
    <body >
    <ul>
        <li onclick="clicker()" class="li01">one</li>
        <li onclick="clicker()" class="li02">two</li>
        <li onclick="clicker()" class="li03">three</li>
        <div class="web_clear"></div>
    </ul>
    <div class="web_index">
    <div style="display:block" >content one</div>
    <div style="display:none">content two</div>
    <div style="display:none">content three</div>
    </div>
    i am a learner of javascript. so first i don't want to use jquery to get the tab. the above is my code. but it doesn't work.how to correct my code. thank you.
    i want to when click one then show content one.all the content are hidden. two then show content two...

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    i am a learner of javascript. so first i don't want to use jquery to get the tab. the above is my code. but it doesn't work.how to correct my code. thank you.
    i want to when click one then show content one.all the content are hidden. two then show content two...
    The standard technique for that is for the script to first hide all of the content, and to then show the one that the clicked link refers to.

    Typically the second part is achieved by having a link that goes to a fragment identifier, such as "#content1" and to have a div with the same value as its identifier: id="content1"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The standard technique for that is for the script to first hide all of the content, and to then show the one that the clicked link refers to.

    Typically the second part is achieved by having a link that goes to a fragment identifier, such as "#content1" and to have a div with the same value as its identifier: id="content1"
    i am sorry, i don't follow the second part and don't know how to do?thank u

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    i am sorry, i don't follow the second part and don't know how to do?thank u
    It's where you have a link, and you have some content. The link uses a fragment identifier, which targets the identifier of the content.

    Code:
    <a href="#content1">Link to content 1</a>
    ...
    <div id="content1">Content 1 is in here</div>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    It's where you have a link, and you have some content. The link uses a fragment identifier, which targets the identifier of the content.

    Code:
    <a href="#content1">Link to content 1</a>
    ...
    <div id="content1">Content 1 is in here</div>
    how you will use the fragment identifier, thank you , the more detail is better,

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    how you will use the fragment identifier, thank you , the more detail is better,
    The fragment identifier is the hash symbol followed by some text. For example: #content1
    More detail can be found at http://en.wikipedia.org/wiki/Fragment_identifier

    But basically, it's how you tell the web browser that you want to scroll the page down to the part of the page that has that identifier.

    How it can be used with scripting, it to disable the default web browser behaviour, and to instead use the fragment identifier from the link as a way to identify the area of interest, in this case that would be showing the related content area, after first hiding them all.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •