alwayslearning alwayslearning -4 years ago 74
CSS Question

Changing the style of words when clicked

I have a menu that doesn't point to a new page, it changes content on the same page.

I Tried CSS but cant get it to work for this. Is it possible in pure CSS?

The script I wrote works by getting the page title, but there is no page title.


The First ITEM "OVERVIEW" should be highlighted bold when the page is first opened. Then on click another link the "OVERVIEW" drops the bold and the new link becomes bold and so on.


<div class="bblock1" style="height:100%;">
<div class="container">
<div class="bodymainMaxS">
<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg'>&nbsp;</div>
<span class='tab_item'>OVERVIEW</span>
<span class='tab_item'>THE SCIENCE</span>
<span class='tab_item'>ORDER</span>
<span class='tab_item'>REPLACEMENT FILTERS</span>


.tabbed_content {
background-color: #000;
width: 100%;

.tabs {
position: relative;

.tabs .moving_bg {
position: absolute;
width: 600px;
z-index: 7;
left: 0;
padding-bottom: 16px;
background-position: left bottom;
background-repeat: no-repeat;
margin: 0 auto;


.tabs {}

.tab_item {
display: block;
float: left;
width: 150px;
color: #ccc;
text-align: center;
z-index: 8;
position: relative;
cursor: pointer;
font-family: 'SourceSansPro-SemiBold';
font-size: 15px;

background-image: url('images/circleA.png');
border-left: 1px solid #333;
padding: 8px 10px 8px 10px;
margin: 0 auto;
.tab_item:hover {
color: #fff;

.tab_item:visited {
color: #fff;



Answer Source

With jQuery you just need to write few lines (see fiddle here ):

$(document).ready(function() {
  $(".tab_item").on("click", function() {

with css:

.tab_item.bold {
  font-weight: bold;

(you could also change font-weight instead of toggling the class)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download