...

View Full Version : href url based on the first-child of the list



alvin_bilian
12-19-2006, 12:57 PM
Hi!
I need help with this...
Lets say I have a code like this:

<a href="#" id="clickme">Click me</a>

And I want to change the above code href attributes with the href of....

<ul id="list">
<li><a href="http://www.google.com">ABC</a></li> <---- ....this element
<li><a href="http://www.yahoo.com">DBF</a></li>
<li><a href="http://www.javascriptkit.com">GHI</a></li>
</ul>

So, can you guys help me? :cool:
Really need this thing to work...

david_kw
12-19-2006, 07:43 PM
I really am not sure what you are asking but here is some interesting code that might be similar to your question



<html>
<head>
<title>Change HREF</title>
<script type="text/javascript">
function msg(s) {
var adiv = document.getElementById("adiv");
adiv.innerHTML = s;
}

function changeHref(oThis) {
document.getElementById("clickme").href = oThis.href;
msg("Changed link to " + oThis.href);
return(false);
}
</script>
</head>
<body>
<div>
<a href="#" id="clickme">Click me</a>

<ul id="list">
<li><a href="http://www.google.com" onclick="return changeHref(this);">ABC</a></li> <!-- ....this element -->
<li><a href="http://www.yahoo.com" onclick="return changeHref(this);">DBF</a></li>
<li><a href="http://www.javascriptkit.com" onclick="return changeHref(this);">GHI</a></li>
</ul>
<div id="adiv"> </div>

</div>
</body>
</html>


david_kw

Ancora
12-19-2006, 08:33 PM
alvin_bilian:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function init(){

var firstItem = document.getElementById('list').getElementsByTagName('li')[0].firstChild.href;
document.getElementById('clickme').href = firstItem;
}

onload=init;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}

</style>
</head>
<body>
<a href="#" id="clickme">Click me</a>
<ul id="list">
<li><a href="http://www.google.com">ABC</a></li>
<li><a href="http://www.yahoo.com">DBF</a></li>
<li><a href="http://www.javascriptkit.com">GHI</a></li>
</ul>
</body>
</html>

alvin_bilian
12-20-2006, 03:58 AM
All Right thanks guys for your help!!:D
Its working perfectly!!:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum