alwayslearning alwayslearning - 3 months ago 7
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.

Concept

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.

HTML

<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>
</div>
</div>
</div>
</div>


CSS

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

.tabs {
position: relative;
width:70%;
float:left;}

.tabs .moving_bg {
background-color:;
background-image:url(/images/arrow_down_blue.png);
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;
text-align:center;
}
.tab_item:hover {
color: #fff;

}
.tab_item:visited {
color: #fff;

}


Fiddle:

https://jsfiddle.net/y2c2hdvx/4/

Answer

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

$(document).ready(function() {
  $(".tab_item").on("click", function() {
    $(".tab_item").removeClass("bold");
    $(this).addClass("bold");
  });
});

with css:

.tab_item.bold {
  font-weight: bold;
}

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