Sunday, January 2, 2011

JavaScript getElementById - example

getElementById -JavaScript DOM
 
var element = document.getElementById('idex');
 <div id="idex">
somthing here 
</div>
 
Another Example  
<script>
var ids=new Array('a1','a2','a3','a4');

function switchid(id){  
    hideallids();
    showdiv(id);
}

function hideallids(){
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }        
}

function hidediv(id) {
    if (document.getElementById) {
        document.getElementById(id).style.display = 'none';
    }
    else {
        if (document.layers) {
            document.id.display = 'none';
        }
        else {
            document.all.id.style.display = 'none';
        }
    }
}

function showdiv(id) {
        
    if (document.getElementById) {
        document.getElementById(id).style.display = 'block';
      
    }
    else {
        if (document.layers) { // Netscape 4
            document.id.display = 'block';
        }
        else { // IE 4
            document.all.id.style.display = 'block';
        }
    }
}
</script>
here you have to ' id'
<a href="javascript:switchid('a1');" >div1</a><br />
<a href="javascript:switchid('a2');" >div2</a><br />
<a href="javascript:switchid('a3');" >div3</a><br />
<a href="javascript:switchid('a4');" >div4</a><br />
//div element with 'id'
    <div id='a1' style="display:none;">
              <ul>
                <li><a href=""> div1</a></li>
                <li><a href=""> div1</a></li>
                <li><a href="">div1</a></li>
                <li>SEO</li>
              </ul>
            </div>
            <div id='a2' style="display:none;">
              <ul>
                <li>div2</li>
                <li>div2</li>
                <li>div2</li>
                <li>div2</li>
                <li>div2</li>

              </ul>
            </div>
            <div id='a3' style="display:none;">
              <ul>

                <li>div3</li>
                <li>div3</li>
                <li>div3</li>
              </ul>
            </div>
            <div id='a4' style="display:none;">
              <ul>
                <li>div4</li>
                <li>div4</li>
              </ul>
            </div>

No comments:

Post a Comment