It is currently Fri Jul 25, 2014 6:06 pm

All times are UTC [ DST ]




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: Javascript Webdesign Help
PostPosted: Thu Nov 19, 2009 8:23 am 
Offline
User avatar
.: Level IV :.

Joined: Wed Jul 15, 2009 6:31 pm
Posts: 1987
Location: Somewhere, lah.
iTrader:
Gender: Male
Cash:855
Reputation point: 227
Shawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant future


Content Giveaway Donor Award Trader Winner Award

Code:
<html>

<head>

<title>Website</title>

<style type="text/css">

* {
padding: none;
margin: none;
}

body {
cursor: default;
}

ul.nav {
color: #333;
font: 9px Georgia ;
padding: 0px;
}

.nav li {
display: inline;
list-style-type: none;
}

.nav li a {
color: #333;
text-decoration: none;
}

.nav li a:hover {
color: #555;
font-weight: bold;
}

.nav li a.active {
color: #555;
font-weight: bold;
}

.nav li a.active:hover {
color: #555;
font-style: normal;
font-weight: bold;
}

</style>

</head>

<body>

<ul class="nav">
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Contact</a></li>
</ul>

</body>


</html>


There's the code. So I get a page with 4 links in li tags horizontally. What I want to do is when I click let's say "Works", make the link change it's class to "active" and change the link "Home" to have a not active class.

So how do I achieve this? I don't mind if you either make the list change it's class or make the link stay in it's a:active state until another link is clicked.

Thanks :kiss:

_________________


Top
 Profile  
 
 Post subject: Re: Javascript Webdesign Help
PostPosted: Wed Nov 25, 2009 1:09 am 
Offline
User avatar
.: Admin :.

Joined: Sun Mar 02, 2008 5:00 am
Posts: 3003
Location: Home sweet home
iTrader:
Gender: Male
Cash:3460
Reputation point: 519
Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!Zer0 has a reputation beyond repute!


Content Giveaway Donor Award Trader Winner Award

First set the the id of each <li> to something. Then the Javascript to change the class is
Code:
document.getElementById(idhere).className = "newclassname";

_________________
Programs
AB List Creator ~ Account Generator

Guides
Employment Agency ~ NeoAcademy HowTo ~ List of Guides ~ Game Score Review List ~ Starting up (again) After Getting Iced ~ Packrat Avatar List ~ Top Gamer Avatar Game List ~ Avatar Game List ~ Roodoku Guide ~ Altador Cup Player Avatar ~ GM Scripts ~ Autobuying Shop Guide ~ Ways of Making NP ~ Neoquest 3D ~ IP Addresses

Helpful Threads
Taking AB List Requests ~ AB Lists ~ Updated Igloo AB List

Code Snippets
[Java] HTTP Wrapper ~ [Java] Neopets Wrapper ~ [Java] Proxy Support ~ [Java] Smart Haggle


Top
 Profile  
 
 Post subject: Re: Javascript Webdesign Help
PostPosted: Wed Nov 25, 2009 8:24 am 
Offline
User avatar
.: Level IV :.

Joined: Wed Jul 15, 2009 6:31 pm
Posts: 1987
Location: Somewhere, lah.
iTrader:
Gender: Male
Cash:855
Reputation point: 227
Shawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant future


Content Giveaway Donor Award Trader Winner Award

thanks Zero. but that is to change class only. is there a way to get the links to return to normal state when I click another, I can't have all links in a "selected" state.
Not very good at javascript.

Anyone knows how to work this? Looping and such i think

_________________


Top
 Profile  
 
 Post subject: Re: Javascript Webdesign Help
PostPosted: Wed Nov 25, 2009 11:33 am 
Offline
User avatar
.: Admin :.

Joined: Fri Nov 10, 2006 4:48 pm
Posts: 1864
Location: Naples, Italy
iTrader:
Gender: Male
Cash:1504
Reputation point: 278
ricky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant futurericky92 has a brilliant future


Giveaway Donor Award Graphics Trader Winner Award

Replace your HTML
Code:
<ul class="nav">
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Contact</a></li>
</ul>

with this:
Code:
<ul class="nav" id="nav">
  <li><a class="active" href="#" onclick="setNav(this);">Home</a></li>
  <li><a href="#" onclick="setNav(this);">About</a></li>
  <li><a href="#" onclick="setNav(this);">Works</a></li>
  <li><a href="#" onclick="setNav(this);">Contact</a></li>
</ul>

and use this javascript function:
Code:
function setNav(obj)
{
   navLinks = document.getElementById('nav').getElementsByTagName('a');
   for (i = 0; i < navLinks.length; i++)
   {
      if (navLinks[i] == obj)
      {
         obj.className = 'active';
      }
      else
      {
         navLinks[i].className = '';
      }
   }
   return true;
}

It should work :)

_________________
Image


Top
 Profile  
 
 Post subject: Re: Javascript Webdesign Help
PostPosted: Fri Nov 27, 2009 10:14 am 
Offline
User avatar
.: Level IV :.

Joined: Wed Jul 15, 2009 6:31 pm
Posts: 1987
Location: Somewhere, lah.
iTrader:
Gender: Male
Cash:855
Reputation point: 227
Shawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant futureShawn has a brilliant future


Content Giveaway Donor Award Trader Winner Award

Thanks ricky, it works perfect :kiss:

_________________


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC [ DST ]


Who is online

Users browsing this forum: No registered users and 0 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
* FAQ

Powered by phpBB © 2000- phpBB Group
NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-. © denotes Reg. US Pat. & TM Office. All rights reserved.
Website © neofriends.net - this site is in no way affiliated with Neopets, Inc or Viacom International, Inc.

phpBB SEO