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:

Expand|Select|Wrap|Line Numbers

 <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:

Expand|Select|Wrap|Line Numbers

 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?

Sep 18 '14 #1

Subscribe Post Reply

6723

Exequiel

288

256MB

Try this one.

Expand|Select|Wrap|Line Numbers

 <!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>

Sep 19 '14 #2

ramani

thank you its working fine. but, i actually want to append <div> tag to the innerhtml,

i have three different codes something like

Expand|Select|Wrap|Line Numbers

 <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>

Sep 19 '14 #3

Similar topics

onClick and input type="text"

by: Silmar | last post by:

Hi! In my form I have table which cells contain input objects of type="text" which initially are disabled. I would like to activate them by clicking on them. However because input object does...

Javascript

get image filename fom div

by: Andrew Poulos | last post by:

I've have a number of DIV tags that contain one image. Each DIV has an onclick event. How can I get the image filename? I just need the filename and not the file path. I was trying to do...

Javascript

Simple <div onclick=""> not working in firefox

by: Eric-Sebastien Lachance | last post by:

Hey there, I decided to just create a 100% height and width div that filled the space over a background header image, and add an onclick event to redirect to the my index... Doesn't seem to work...

Javascript

referencing enclosing div tag

by: libsfan01 | last post by:

Hi all How do u reference the id (and also now i think about it the name) of the enclosing div tag of a form element such as a button or div tag (without specifying its name)? I've tried:...

Javascript

calling another events onclick ...

by: phish.guy | last post by:

How do I call another event's onclick function from a button press? I have stored information dynamically created in a div onclick function that is not accessible directly by the button, but i...

Javascript

onclick behaves differently when defined via javascript

by: yawnmoth | last post by:

http://www.frostjedi.com/terra/scripts/demo/this-alert.html http://www.frostjedi.com/terra/scripts/demo/this-alert2.html Why, when you click in the black box, do the alert boxes say different...

Javascript

How to call button click event from div onclick event?

by: saadkhan | last post by:

i want to a buttin click event when a <div> is clicked. That is when div tag`s onclick event fires, it directs to button click event..... <div id="Div" onclick="????????"> HEADER </div>...

.NET Framework

ie div onclick problem

by: xdevel1999 | last post by:

Hi why if I have a DIV I can raise an onclick event only on the inner DIVs and not on the whole area? (Firefox does it) <div id="submenu" class="style1"> <div id="item" onclick="alert(444)">...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General