Develop Reference

How to style an `#id` after selecting that `#id` from my dropdown menu?

Details
I have a dropdown-menu of countries
Each country have an id of it's name. Ex. Australia - id="Australia"
When I select on them, they will redirect/zoom-in to that country.
It's work so far, but it's a little hard to tell which country that I just clicked on.
So now, I want apply border to my class="country-name"
Here is my dropdown-list
As you can see I selected on Australia then my HTML should like this
<h5 id="Australiaia" class="country-name" >Australia</h5>
Then, my view should re-direct me to
Here is what I want to do , I want to put the border to Australia in the view.
JSFiddle

Add a target-selector to your css:
.country-name:target { font-weight: bold; color: red; }

Well for a start you could read the jQuery documentation. And this is what your code should look like.
$('.country_name').click(function () {
$(this).toggleClass('yourclass');
});

Maybe you should learn how to post code, because including a jfiddle with every language under 'html' isn't exactly going to help anyone nor does anyone want to dig through all your lines trying to figure out what the hell you have going on, but with that said...I will tell you the basic steps of what you're going to be doing...
Detect change of select, get this value.
Find the h5 with that value, give it a class.
Scroll to the id that is holding your country.

There are a couple of things I noticed in your code.
First you should not have the id of an element, that's very bad practice.
Secondly, it's always a good idea to use a class on an element which you want to change or manipulate via jquery or javascript. It's much easier. As I noticed you didn't put on any of the parents wrapping your h5 tag
Anyways, here's one solution
Use a css class for your borders
.border-country{border:solid red 1px;}
AND Modify your jquery code
var lastElem=null;
$('#state').on('change',function(event){
var state= $(this).val();
// remove already existing borders on any country lists
$(lastElem).parent().parent().removeClass('border-country');
// add your own class
$(state).parent().parent().addClass('border-country');
// save current element in your lastElem variable and you can remove border when firing the second or so on events
lastElem=$(state);
});
I'm using the parent() function because of the second point I mentioned in my observations, you could avoid that by putting a mock class on your parent element wrapping the h5 tag.
If you had used a class we could have simply used
$('yourclass').removeClass('.border-country');
$('yourclass').addClass('.border-country');
Hope this helps and this should work!
Thx

You can either style your element in your CSS file:
.country-name{color: red;}
Or, if you have to do it in jQuery, you can do something like this:
$(document).ready(function(){
$(".country-name").css("color", "red");
})

$('.country_name').on('click', function() {
$(this).css('border', '1px solid red');
}
for example.

Javascript Run Action on click of a Hyperlink

My Javascript knowledge is extremely low, so sorry for this stupid question, but I have searched everywhere.
I'm using a single page scrolling script, but trying to add a navigation bar. The documentation references this for changing to a page:
$(".main").moveTo(3);
How do I make a link to run this? I just want a Hyperlink that runs this when clicked, but cannot work out how to do it.

You can use the selector for the hyperlink as
$('a').click(function () {
// paste your function here..
})
You can use a specific selector such as its class as
$('a.move').click(function () {
// function
}
Where its HTML will be as
Click Me

No, you don't. If the hyperlink does not link to a resource, it's not a hyperlink and you should not use the <a> tag. What you're describing is a "click to do something" element, which is the <button> element. Simply use this:
<button onclick="$('.main').moveTo(3)">click this</button>
And then use some CSS to make the button look like whatever you need it to look like (button default styling is just CSS, so turn off the border and background color, and now it looks like plain text)

CSS-sprite menu and jQuery addClass() method

I've created CSS sprite menu based on this tutorial:
http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Now I'd like to assign .selected class to the 'a' which was clicked as last one. I've added sipmle script:
<script>
$("a").click(function(){
$(this).addClass("selected");
});
</script>
but the class .selected appears only during loading the page. After loading whole page menu item returns to its normal state. Could you help me with this issue? TIA
Have a nice day:)

Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:
<script>
$(function(){ //short form of $(document).ready(function(){
$("a").each(function(){
path=window.location;
path=String(path).split('/')['3']; //if you use absolute URLs then disable this line
if($(this).attr('href')==path)
{
$(this).addClass("selected");
}
});
});
</script>
It will add class selected to link(s) if it's href matches the current URL of the browser.

I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)
First off, your body tags should have classes assigned to them.
<body class="products">
for example.
Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.
<li class="products">Products</li>
for example.
Now, in your CSS, simply do this:
body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }
These CSS rules will then only be "used" when the visitor is on the "selected" page.
This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.

Scrolling effect with the destination highlighted with jQuery

I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.

As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.

I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.

Jquery Question - select and change background color of all hyperlinks save link clicked

need a quick help here. I have a series of hyperlinks all with the same class name. I want that when I click on anyone of the links - the background colors of all the other hyperlinks change except the link I have clicked.

$('.className').click(function() {
$('.className').not(this).css('backgroundColor', '#ccff00');
});

Another option here.
Jquery Visited Plugin
Define a CSS class "visited". And then..
$('#sidebar a').visited().addClass('visited');

I would create another class that has the new background color and apply it to all except the one that was just clicked.
$('.first_class').click(function(){
$('.first_class').not(this).addClass('new_class')
});

$("a").onclick(function () {
$(this).css("color");
});
With jQuery you can alter the CSS settings directly - so just build a function, choose a trigger (onclick, mouseover etc.) and you can alter the CSS settings...