alwayslearning alwayslearning - 3 months ago 8
CSS Question

changing style of words when clciked

i have a menu that doesnt point to a new page, it changes content on the same page.

Tried css but cant get it to work for this. Is it possible in pure css?
T
he 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. thanks for your help. wasting so much time on this.

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)

Comments