body{ margin:0px; padding:0px; } li{ list-style: none; } a{ text-decoration: none; } button{ border:none; } input,button,select,textarea{ outline:none; } .box{ height:600px; margin-top: 100px; margin-left: 100px; } .title{ font:16px/30px "宋体"; height: 30px; width: 306px; border-top:2px solid #206F96; } .title .btn{ width:102px; height: 29px; font-size: 16px; } .title .btn-news{ border-left: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF; float: left; background: #fff; } .title .btn-pic{ border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; background: url(../images/1.jpg) repeat-x; float: left; } .title .btn-aff{ border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; background: url(../images/1.jpg) repeat-x; float: left; } .contents ul{ padding-left:10px; } .contents ul li+li{ line-height:29px; } .contents ul li a{ color: #666; } .contents ul li:hover,.contents ul li:visited,.contents ul li a:hover ,.contents ul li a :visited{ color: #68a3ff; } #pictures,#affairs{ display: none; }
3、js实现
/** * Created by lxq on 2016/10/3. */ $(document).ready(function(){ $(".title .btn-pic").click(function(){ $("#pictures").css({ "display": "block"}); $("#news").css({ "display": "none"}); $("#affairs").css({ "display": "none"}); $(".btn-pic").css({ "border-bottom": "none","background-image":"none"}); $(".btn-news").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); $(".btn-aff").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); }); $(".title .btn-aff").click(function(){ $("#affairs").css({ "display": "block"}); $("#news").css({ "display": "none"}); $("#pictures").css({ "display": "none"}); $(".btn-aff").css({ "border-bottom": "none","background-image":"none"}); $(".btn-pic").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); $(".btn-news").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); }); $(".title .btn-news").click(function(){ $("#news").css({ "display": "block"}); $("#affairs").css({ "display": "none"}); $("#pictures").css({ "display": "none"}); $(".btn-news").css({ "border-bottom": "none","background-image":"none"}); $(".btn-pic").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); $(".btn-aff").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); }); });
使用jquery最大的好处就是在获取标签的时候很方便，直接通过$和class名或者id名就直接获取。