CODEWITHSUNDEEP
javascriptjquerycss
alwayslearning
alwayslearning

Reputation: 411

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/

Upvotes: 1

Views: 62

Answers (4)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

Toggling text style on click is possible with pure css. Unfortunately I can't think of a way to remove styling on Overview when the others are clicked. Lots of ways to do it all with JS of course.

Here's the pure css approach for toggling styles using :target

.tabbed_content {
  background-color: #000;
  width: 100%;
}
.tabs {
  position: relative;
  width:70%;
  float:left;
}
.tabs .moving_bg {
  background-color: none;
  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;
  text-decoration: none;
  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;
}
#ti1 {
  font-weight: bold;
  color: black;
}
.tab-item:visited {
  font-weight: normal!important;
  color: #CCC;
}
#ti1:target, #ti2:target, #ti3:target, #ti4:target   {
  font-weight: bold!important;
  color: black!important;
}
<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>
          <a class="tab-item" href="#ti1">
            <div id="ti1">OVERVIEW</div>
          </a>
          <a class="tab-item" href="#ti2">
            <div id="ti2">THE SCIENCE</div>
          </a>
          <a class="tab-item" href="#ti3">
            <div id="ti3">ORDER</div>
          </a>
          <a class="tab-item" href="#ti4">
            <div id="ti4">REPLACEMENT FILTERS</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

fiddle

https://jsfiddle.net/Hastig/e5kykj8e/

Here's an old but recently updated click-to-slide-open accordion menu using pure css :target for those who find their way here from google.

https://jsfiddle.net/Hastig/cfLqbvgm/3/

Upvotes: 0

caldera.sac
caldera.sac

Reputation: 5098

is this what you want

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style type="text/css">


div.nav_container ul li{
  list-style-type: none;
  margin: 30px;
  display: inline;
  font-family: Helvetica;
  cursor: pointer;
}

.bebold{
  font-weight: bold;
}

.nobold{
  font-weight: normal;
}



</style>

<body>

<div class="nav_container">
  <ul>
   <li>OVERVIEW</li>
   <li>THE SCIENCE</li>
   <li>ORDER</li>
   <li>REPLACEMENT FILTERS</li>

  </ul>
</div>
</body>

<script type="text/javascript">

$("div.nav_container ul li").click(function(){

   $("li").removeClass("bebold");
   $(this).addClass("bebold");
});


</script>

</html>

Upvotes: 0

Ehsan
Ehsan

Reputation: 12969

try it :

$(document).ready(function(){

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

        $(".tab_item").removeClass("active");

        $(this).addClass("active");

    })

})

Final code :

<!DOCTYPE html>
<html>
<head>
    <style>
        .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: 800px;
    z-index: 7;
    left: 0;
    padding-bottom: 16px;
    background-position: left bottom;
    background-repeat: no-repeat;
	margin: 0 auto;

}


.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:visited {
	color: #fff;

}
 .tab_item:hover {
        color: #111;
    }    

        .active {
             font-weight:bolder;
        }

    </style>
</head>
    <body>
        
        <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 active'>OVERVIEW</span>
	        <span class='tab_item'>THE SCIENCE</span>
	        <span class='tab_item'>ORDER</span>
	    </div>
 </div>
</div>
            </div></div>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
$(document).ready(function(){
    
    $(".tab_item").on("click",function(){
        
        $(".tab_item").removeClass("active");
        
        $(this).addClass("active");
        
    })
    
})

    </script>
    </body>
</html>

Upvotes: 0

Dario
Dario

Reputation: 6280

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)

Upvotes: 2

Related Questions