css - Making links active in Javascript - Stack Overflow

admin管理员组

文章数量:1323348

I have some problems with Javascript. In fact, I'm just newbie in that script language so I need some help.. Q: how to make this link active:

<a href="#box1">something</a>

this link is just link to the div which is located in index.html file, so there is no loading of page. and here is the div

<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>

I have some problems with Javascript. In fact, I'm just newbie in that script language so I need some help.. Q: how to make this link active:

<a href="#box1">something</a>

this link is just link to the div which is located in index.html file, so there is no loading of page. and here is the div

<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>

• javascript
• css

Share Improve this question Follow asked Jun 19, 2012 at 9:47 Zeid SelimovicZeid Selimovic 85344 gold badges1313 silver badges1919 bronze badges 2

• 1 What do you mean by making active – Rab Commented Jun 19, 2012 at 9:49
• For example to change link's background color in order to show user where is he/she located.. in css there is this snap of code a:active {background:#fff;} but it doesnt work because there is no loading of page – Zeid Selimovic Commented Jun 19, 2012 at 9:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Since you're just starting out, I'd suggest you use a library such as jQuery. So, if your HTML is like this:

<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>
<div id="box2" class="box">
<h3><a name="box2">something</a></h3>
</div>
<div id="box3" class="box">
<h3><a name="box3">something</a></h3>
</div>

And you have a CSS class called youarehere:

.youarehere { color:white; background:green; }

With jQuery you could write something along the lines of:

$(".box > a").click(function() {             // when clicking any of these links
    $(".box > a").removeClass("youarehere"); // remove highlight from all links
    $(this).addClass("youarehere");          // add highlight to clicked link
})

In plain JS, it takes a bit more effort to achieve this. Do yourself a favor and don't reinvent the wheel - people have already taken care of this, so use the product of their labor to make your life easier.

a:active means when you click the link the css properties will apply on the link, instead of using a:active use

a.visited{color:red;}

To change the link text color on mouse over use the following css:

<style type="text/css">
        a:hover{color:Red;}
    </style>

本文标签： cssMaking links active in JavascriptStack Overflow