13-11.txt

开发王代码 代码

<style>
<!--
  #tabContainer{
    position:absolute;
    top:2px;
    width:255px;
	height:134px;    
	background-image:url(pic/tab_bg.gif);
	background-repeat:no-repeat;
	overflow:hidden;
  }
  #mainNav{
    position:absolute;
    top:0px;
    width:255px;
	height:30px;    
  }
  .mainItem{
	position:absolute;
	top:2px;
	height:26px;
	width:68px;
	padding:1px 0px;
	margin-top:1px;
	text-align:center;
	font-size:13px;
	background-image:url(pic/tab5.gif);
	background-repeat:no-repeat;
  }
  .subItemNav{
	position: absolute;
	top:30px;
	width:245px;
    height:94px;
	padding:5px 5px;
  }
-->
</style>
</head>

<div id="tabContainer">
  <div id="mainNav">
    <div id="mainItem1" class="mainItem"
             onmouseover="displaySubItem(this);">开发王</div>
	<div id="mainItem2" class="mainItem"
             onmouseover="displaySubItem(this);">最佳拍档</div>
	<div id="mainItem3" class="mainItem"
             onmouseover="displaySubItem(this);">Flash</div>
  </div>
  <div id="subMenu" class="subItemNav"></div>
</div>
<script type="text/javascript">
<!--
//--------------------[01]-----------------------------------------
//初始化，
//变量totalItems表示共有多少个主菜单项
var totalItems = 3;
var subMenu1="";
subMenu1 += '<div style="float:left;border:#48956F solid 1px;"><img src="/ysf_css/content/product/imgs/pic0005.jpg" width="80" height="80"/></div>';
subMenu1 += '<div style="float:left;font-size:13px;padding-left:10px;">';
subMenu1 += '<b>芥末鸭掌</b><br />';
subMenu1 += '<span>价格：￥10</span><br />';
subMenu1 += '<span>现有数量：1001例</span><br />';
subMenu1 += '<span>菜肴类型：热荤菜</span><br />';
subMenu1 += '</div>';
var subMenu2="";
subMenu2 += '略';
var subMenu3="";
subMenu3 += '略';
function init(){ 
  //获取子菜单项div元素，并设置其内容
  var oSubItem = document.getElementById("subMenu");
  oSubItem.innerHTML = subMenu1;  
  for (var i=1; i<= totalItems; i++){
    //获取所有主菜单项div元素，并设置其样式，主要就是初始化定位
	var oMainItem = document.getElementById("mainItem"+i);
    oMainItem.style.left = 68*(i-1)+35+"px";
	if(i==1){
	  oMainItem.style.backgroundImage = "url(pic/tab7.gif)";
	}
  }
}
init();
//--------------------[02]-----------------------------------------
//鼠标指针移到主菜单项上方，触发该函数
//该函数重新设置主菜单项和子菜单项
function displaySubItem(theobj){
  for (var i=1; i<= totalItems; i++){
	var oMainItem = document.getElementById("mainItem"+i);
	oMainItem.style.backgroundImage = "url(pic/tab5.gif)";
  }
  var oSubItem = document.getElementById("subMenu");
  var mainItemIndex = theobj.getAttribute("id").toString().substring(8);
  oSubItem.innerHTML = eval("subMenu"+mainItemIndex);
  theobj.style.backgroundImage = "url(pic/tab7.gif)";
}				
-->
</script>
</body>