CSS3 导航选中按钮

最新推荐文章于 2024-07-30 11:40:42 发布

dx0829

最新推荐文章于 2024-07-30 11:40:42 发布

阅读量597

点赞数

本文链接：https://blog.csdn.net/dx0829/article/details/80931122

版权

利用checked 选中的状态来切换按钮的背景颜色

   <!DOCTYPE html> 
 

   < 
  html 
  lang= 
  " 
  en 
  "> 
 

   < 
  head> 
 

   < 
  meta 
  charset= 
  " 
  UTF-8 
  "> 
 

   < 
  meta 
  name= 
  " 
  viewport 
  " 
  content= 
  " 
  width=device-width, initial-scale=1.0 
  "> 
 

   < 
  meta 
  http-equiv= 
  " 
  X-UA-Compatible 
  " 
  content= 
  " 
  ie=edge 
  "> 
 

   < 
  title>Document</ 
  title> 
 

   < 
  style> 
 

 
  input{ 
  display 
  : 
  none;} 
 
 
 
 
  span{ 
  height 
  : 
  30 
  px; 
  width 
  : 
  90 
  px; 
  border 
  : 
  1 
  px 
  solid 
  #999; 
  display 
  : 
  block; 
  float 
  : 
  left; 
  text-align 
  : 
  center; 
  line-height 
  : 
  30 
  px; 
  padding 
  : 
  0 
  7 
  px; 
  margin-left 
  : 
  -1 
  px;} 
 
 
 
 
  input 
  : 
  checked 
  +span{ 
  background 
  : 
  #999; 
  color 
  : 
  #fff;} 
 
 
 

   </ 
  style> 
 

   </ 
  head> 
 

   < 
  body> 
 

   < 
  div 
  class= 
  " 
  wrap 
  "> 
 


   < 
  label> 
 
 
 

   < 
  input 
  type= 
  " 
  radio 
  " 
  checked 
  name= 
  " 
  nav 
  " /> 
 
 
 

   < 
  span>网站首页</ 
  span> 
 
 
 

   </ 
  label> 
 
 
 

   < 
  label> 
 
 
 

   < 
  input 
  type= 
  " 
  radio 
  " 
  name= 
  " 
  nav 
  " /> 
 
 
 

   < 
  span>公司简介</ 
  span> 
 
 
 

   </ 
  label> 
 
 
 

   < 
  label> 
 
 
 

   < 
  input 
  type= 
  " 
  radio 
  " 
  name= 
  " 
  nav 
  " /> 
 
 
 

   < 
  span>企业动态</ 
  span> 
 
 
 

   </ 
  label> 
 
 
 

   < 
  label> 
 
 
 

   < 
  input 
  type= 
  " 
  radio 
  " 
  name= 
  " 
  nav 
  " /> 
 
 
 

   < 
  span>下载客户端</ 
  span> 
 
 
 

   </ 
  label> 
 
 
 

   </ 
  div> 
 

   </ 
  body> 
 

   </ 
  html> 
 