页面中简单的切换效果

最新推荐文章于 2024-08-30 12:03:29 发布

霖霏晗

最新推荐文章于 2024-08-30 12:03:29 发布

阅读量330

点赞数

分类专栏：特效

本文链接：https://blog.csdn.net/xxz_best/article/details/44257019

版权

特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近自己在写页面的时候总是会遇到一切切换的效果，自己看起来感觉不错。

css代码：

<style>
li{ list-style:none;}
a{ text-decoration:none;}
.content{ margin:0 auto; height:200px; width:600px; border: 1px solid #F6C;}
.c_nav{ width:598px; height:45px; }
 ul{ width:598px; height:45px;  overflow: hidden;}
 li{float:left; height:45px; width:199px; text-align: center;}
a{ line-height:45px;}
.focus_con{width:598px; height:75px; overflow:hidden;}
.fon_c{ width:500px; height:60px; background:#0CC; font-size:16px; margin:0 auto;}
</style>

js 代码

<script type="text/javascript">
function set(name,cursel,n){
	  for(i=1;i<=n;i++){
	  var menu=document.getElementById(name+i);
	  var con=document.getElementById("con"+name+i); 
	  menu.className=i==cursel?"hover":"";             // 设置MENU的样式(class="样式名"，CSS中定义)，条件是 如果i==cursel则样式为“hover”，否则不加任何样式
	  con.style.display=i==cursel?"block":"none";   // 设置con的样式 如果i==cursel则显示样式，否则不显示   hover和block对应  
	} 
  }
</script>

html 代码

<div class="content">
        <div class="c_nav">
            <ul> 
                <li id="focus1" οnmοuseοver="set('focus',1,3)" >
                    <a target="_blank" href="#">环境</a>
                </li>
                <li id="focus2" οnmοuseοver="set('focus',2,3)">
                    <a target="_blank" href="#">报道</a>
                </li>
                <li id="focus3"οnmοuseοver="set('focus',3,3)"   class="hover">
                    <a target="_blank" href="#">动态</a>
                </li>
            </ul>
        </div>
        <div id="confocus1" class="focus_con"  style="display: none;">
            <div class="fon_c">
        	<p>良辰美景奈何天为谁辛苦为谁甜。这年华青涩逝去，却别有洞天。良辰美景奈何天...<a target="_blank" href="#">[详细内容]</a></p>
            </div>
        </div>
                <div id="confocus2" class="focus_con" style="display: none;">
            <div class="fon_c">
        	<p>他不羁的脸，像天色将晚。她洗过的发，像心中火焰。短暂的狂欢，以为一生绵延....<a target="_blank" href="#">[详细内容]</a></p>
            </div>
        </div>
                <div id="confocus3" class="focus_con" style="display: block;">
            <div class="fon_c">
        	<p>你闪烁的眼，像脆弱的信念。贪恋的岁月，被无情偿还。骄纵的心性，已烟消云散...<a target="_blank" href="#">[详细内容]</a></p>
            </div>
        </div>
    </div>

注意：查看效果的时候一定不用忘了链接 jQuery类库

<script type="text/javascript" src="js/jquery.js"></script>