<script type="text/javascript"> function xianshitupian(){ //让图片内容显示出来 document.getElementById("tupian").style.display="block"; //让新闻的内容隐藏 document.getElementById("xinwen").style.display="none"; //让军事的内容隐藏 document.getElementById("junshi").style.display="none"; //让图片的背景隐藏 document.getElementById("span_tupian").style.background="none"; //让新闻的背景加上图片 document.getElementById("span_xinwen").style.background="url(images/1.jpg) repeat-x"; //让军事的背景加上图片 document.getElementById("span_junshi").style.background="url(images/1.jpg) repeat-x"; //让图片的下划线隐藏 document.getElementById("span_tupian").style.borderBottom="none"; //让新闻的下划线加上 document.getElementById("span_xinwen").style.borderBottom="1px solid #CFCFCF "; //让军事的下划线加上 document.getElementById("span_junshi").style.borderBottom="1px solid #CFCFCF "; } function xianshijunshi(){ //让军事内容显示出来 document.getElementById("junshi").style.display="block"; //让新闻的内容隐藏 document.getElementById("xinwen").style.display="none"; //让图片的内容隐藏 document.getElementById("tupian").style.display="none"; //让军事的背景隐藏 document.getElementById("span_junshi").style.background="none"; //让新闻的背景加上图片 document.getElementById("span_xinwen").style.background="url(images/1.jpg) repeat-x"; //让图片的背景加上图片 document.getElementById("span_tupian").style.background="url(images/1.jpg) repeat-x"; //让军事的下划线隐藏 document.getElementById("span_junshi").style.borderBottom="none"; //让新闻的下划线加上 document.getElementById("span_xinwen").style.borderBottom="1px solid #CFCFCF "; //让图片下划线加上 document.getElementById("span_tupian").style.borderBottom="1px solid #CFCFCF "; } function xianshixinwen(){ //让新闻内容显示出来 document.getElementById("xinwen").style.display="block"; //让图片的内容隐藏 document.getElementById("tupian").style.display="none"; //让军事的内容隐藏 document.getElementById("junshi").style.display="none"; //让新闻的背景隐藏 document.getElementById("span_xinwen").style.background="none"; //让图片的背景加上图片 document.getElementById("span_tupian").style.background="url(images/1.jpg) repeat-x"; //让军事的背景加上图片 document.getElementById("span_junshi").style.background="url(images/1.jpg) repeat-x"; //让新闻的下划线隐藏 document.getElementById("span_xinwen").style.borderBottom="none"; //让图片的下划线加上 document.getElementById("span_tupian").style.borderBottom="1px solid #CFCFCF "; //让军事下划线加上 document.getElementById("span_junshi").style.borderBottom="1px solid #CFCFCF "; } </script>
js写起来其实很简单，最重要的目的就是修改样式和制作动画。
二、jquery实现
1、html布局
<div> <div> <button>新闻</button> <button>图片</button> <button>军事</button> </div> <div> <div> <ul> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li> </ul> </div> <div> <ul> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li> </ul> </div> <div> <ul> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li> </ul> </div> </div> </div>
2、css修饰