单击时更改单词的样式

时间：2016-08-27 13:54:24

标签： javascript jquery css

我的菜单没有指向新页面，它会更改同一页面上的内容。

我试过CSS，但不能让它为此工作。是纯粹的CSS吗？

我编写的脚本通过获取页​​面标题来工作，但没有页面标题。

概念

第一个项目＆＃34;概述＆＃34;首次打开页面时，应突出显示为粗体。然后单击另一个链接＆＃34; OVERVIEW＆＃34;删除粗体，新链接变为粗体等等。

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;

}

小提琴：

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

4 个答案:

答案 0 :(得分：2)

使用jQuery，您只需要写几行（请参阅小提琴here）：

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

用css：

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

（您也可以更改字体粗细而不是切换类）

答案 1 :(得分：0)

试一试：

$(document).ready(function(){

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

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

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

    })

})

最终代码：

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这就是你想要的

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

答案 3 :(得分：0)

使用纯css可以在点击时切换文本样式。遗憾的是，我无法想到在点击其他内容时删除概述上的样式的方法。当然，有很多方法可以用JS完成。

这是使用:target

切换样式的纯css方法

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

<强>拨弄

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

这是一个旧的，但最近更新的点击滑动式开放式手风琴菜单，使用纯css：target为那些从谷歌找到他们的方式。

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

相关问题
最新问题