当前位置:编程学习 > JS >>

javascript css的问题

有谁知道下面这张图片上的样式怎么实现啊(要在网页中多处实现)。就是把鼠标放在男性频道就显示男性频道栏目的内容,放到女性频道就显示女性频道的内容。请高手帮忙,我没分。。。。
答案:你是指的标签切换的样式吧? 还是pop样式? 没看到你的图呢.
标签切换是通过onmouseover和onmouseout两个事件修改多个DIV元素的display样式值为block或none来实现的.
pop样式也是通过这两个事件控制浮动层的显示和隐藏,内容的更换可以简单的使用iFrame,也可以通过Ajax来设置内容.
其他:图呢伙计 这其实就是个所谓的滑动门效果,一般情况下是横着的,现在改成坚着的,部分样式及功能已经实现,自己再修改下,如下:
CSS部分:
<style type="text/css">
*{margin:0; padding:0}
.left{float:left;height:210px;width:460px;border:1px solid #ccc; }
.menu0{ float:left;width:70px; height:200px; margin-left:10px; margin-top:10px; border-right:0px solid #ccc;	background-color:#fff;list-style:none;}
.menu0 li{width:70px;height:25px;line-height:25px; font-size:13px;cursor:pointer;border:#ccc solid 1px;border-right:0px;text-align: center; margin-left:5px;}
.menu0 li.hover{background:#eee; border:1px solid #ccc;border-right:1px solid #eee; height:25px; width:75px; margin-left:0px;}
.main0{ float:left; width:350px;padding:0px;height:200px;}
.main0 ul{ list-style:none; float:left; margin-left:10px; margin-top:10px}
.main0 ul li{ line-height:20px; text-align:center}
.main0 ul li a{text-decoration:none; font-size:14px}
.block{display:block;margin-top:10px; background-color:#eee; height:200px; border: #CCCCCC solid 0px; border-left:0}
.unblock{display:none;	margin-top:10px;background-color:#eee; height:200px;border: #CCCCCC solid 0px; border-left:0}
</style>
JS部分:
<script>
function setTab(m,n){
	var tli=document.getElementById("menu"+m).getElementsByTagName("li");
	var mli=document.getElementById("main"+m).getElementsByTagName("div");
	for(i=0;i<tli.length;i++){
  		tli[i].className=i==n?"hover":"";
		mli[i].style.display=i==n?"block":"none";
	}
}
//-->
</script>
BODY内容:
<div class="left">
          <ul class="menu0"  id="menu0">
            <li onmouseover="setTab(0,0)" class="hover">导航菜单></li>
            <li onmouseover="setTab(0,1)">导航菜单></li>
            <li onmouseover="setTab(0,2)">导航菜单></li>
            <li onmouseover="setTab(0,3)">导航菜单></li>
          </ul>
    <div class="main0" id="main0">
		<div class="block">
		  <ul>
			<span>标题标题</span>
			<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>
		  <ul><span>标题标题</span>
			<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 class="unblock">
		  <ul><span>标题标题</span>
			<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 class="unblock">
		  <ul><span>标题标题</span>
			<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>
		  <ul><span>标题标题</span>
			<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 class="unblock">
		  <ul><span>标题标题</span>
			<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>
		  <ul><span>标题标题</span>
			<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>
		  <ul><span>标题标题</span>
			<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> 

上一个:javascript 读取cookies的问题
下一个:在php中嵌了些javascript的脚本,想限制用户提交时的条件,可老是出现错误,小弟实在检验不出来,求大侠帮

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,