calling div- onclick anchor tag

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ramani
    New Member
    • Sep 2014
    • 5
    #1

    calling div- onclick anchor tag

    I have 3 anchor (a) tags, all sharing a single div element to act upon. See my html below. Basically, when you click on anchor tag 1, I want it to fill the div with id="fillDiv" with html. When you click the second anchor tag, it should wipe that #fillDiv and replace it with new html. How do I set up such a functions. Here is my attempt

    HTML:

    Code:
    <div>
<a id="a1" href="javascript: changeDiv();">tag1</a>
<a id="a2" href="javascript: changeDiv();">tag2</a>
<a id="a3" href="javascript: changeDiv();">tag3</a>
</div>

<div id="fillDiv"></div>
    js:

    Code:
    function changeDiv(){
     if changeDiv().is('#a1'){
         document.getElementById('fillDiv').html('<div>filling 1</div>');
         }

     elseif
         changeDiv().is('#a2'){
         document.getElementById('fillDiv').html('<div>filling 2</div>');
         }

     elseif
         changeDiv().is('#a3'){
         document.getElementById('fillDiv').html('<div>filling 3</div>');
         }
}
    can anyone help?
    Last edited by Rabbit; Sep 18 '14, 04:14 PM. Reason: Please use [code] and [/code] tags when posting code or formatted data.
    Tags: None
    • Exequiel
      Contributor
      • Jul 2012
      • 288
      #2
      Try this one.

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zick Sample</title>
<script>
function changeDiv(e)
{
	var changeme = document.getElementById('fillDiv');
	changeme.innerHTML = "filling "+e;
}
</script>
</head>

<body>
<div>
<a id="a1" href="javascript: changeDiv(1);">tag1</a>
<a id="a2" href="javascript: changeDiv(2);">tag2</a>
<a id="a3" href="javascript: changeDiv(3);">tag3</a>
</div>
 
<div id="fillDiv">filling 1</div>

</body>
</html>

        Comment

        • ramani
          New Member
          • Sep 2014
          • 5
          #3
          thank you its working fine. but, i actually want to append <div> tag to the innerhtml,

          i have three different codes something like

          Code:
          <div class='tableauPlaceholder' style='width: 600px; height: 599px;'><object class='tableauViz' width='600' height='599' style='display:none;'><param name='host_url' value='https%3A%2F%2Fonline.tableausoftware.com%2F' /> <param name='site_root' value='/t/nettscience' /><param name='name' value='Livon/Adwords/renuka.srinivas@nettscience.com/Adgroup' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /></object></div>

so based on the tag onclick the corressponding div code should trigger and share the same place.

pls refer the code below,

<!DOCTYPE html PUBLIC "-//W3C//DTD&nbsp;XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zick Sample</title>
<script type='text/javascript' src='https://online.tableausoftware.com/javascripts/api/viz_v1.js'></script>
<script>
function changeDiv(e)
{
    var changeme = document.getElementById('fillDiv');
    changeme.innerHTML = '<div class='tableauPlaceholder' style='width: 600px; height: 599px;'><object class='tableauViz' width='600' height='599' style='display:none;'><param name='host_url' value='https%3A%2F%2Fonline.tableausoftware.com%2F' /> <param name='site_root' value='/t/nettscience' /><param name='name' value='Livon/Adwords/renuka.srinivas@nettscience.com/Adgroup' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /></object></div>';
}
</script>
</head>
 
<body>
<div>
<a id="a1" href="javascript: changeDiv(1);">tag1</a>
<a id="a2" href="javascript: changeDiv(2);">tag2</a>
<a id="a3" href="javascript: changeDiv(3);">tag3</a>
</div>
 
<div id="fillDiv"></div>
 
</body>
</html>


the script for your reference,

if you run the below code you understand what im trying to solve,

<script type='text/javascript' src='https://online.tableausoftware.com/javascripts/api/viz_v1.js'></script><div class='tableauPlaceholder' style='width: 600px; height: 599px;'><object class='tableauViz' width='600' height='599' style='display:none;'><param name='host_url' value='https%3A%2F%2Fonline.tableausoftware.com%2F' /> <param name='site_root' value='/t/nettscience' /><param name='name' value='Livon/Adwords/renuka.srinivas@nettscience.com/Adgroup' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /></object></div>
          Last edited by Rabbit; Sep 19 '14, 03:50 PM. Reason: Please use [code] and [/code] tags when posting code or formatted data. Second warning.

            Comment

            Previous template Next
            Working...