左侧TAB页效果

最新推荐文章于 2021-08-09 14:36:02 发布

最新推荐文章于 2021-08-09 14:36:02 发布 · 388 阅读

文章标签：

#CSS #JSP #XHTML #HTML

技术学习专栏收录该内容

45 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

<%@ page contentType="text/html;charset=utf-8"%>
<%
String nid = StringUtil.getString(request,"nid","0");  //传进来的信息编号
DBRow[] topic = newsMgr.getNewsByTopicByCount(10001,25); //帮助中心10001

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>哈哈</title>
<link href="../css/maincss.css" rel="stylesheet" type="text/css"/>
<style>
#div_help{
    width:1008px !important;
	width:1000px;
	margin: 0px auto;
	overflow: hidden;
}
#div_help #div_main{
    width: 980px;
	margin: 0px auto;
	margin-top:5px;
}
 /*左边*/
#div_help #div_main  #left{
    float: left;
	width: 183px;
	background-color: #fff;
	border-top:1px  #ccc  solid;
	border-left: 1px  #ccc  solid;
	border-bottom: 1px  #ccc  solid;
  }
#left  h1{
   font-size: 15px;
   font-weight: bold;
   text-align:left;
   padding-left: 18px;
   color: blue;
   height:149px;
   background-image: url(<%=webRoot%>/images/bg_help.gif);
   background-repeat: no-repeat;
}
#left .div_space{
  height: 10px;
  
}
#left ul{
  list-style: none;
  width: 100%;
}

#left  li{
	 text-align: left;
	 font-size:13px;
	 width:160px;
	 line-height: 30px;
	 margin-bottom:5px;
}
#left  li a{
   color: #000;

}
#left  li a:hover{
  color: #FE6400;
}

#left  li  a  span,.mover{
	background-image:url(<%=webRoot%>/images/bg_btnblue.gif);
	cursor:hand;
    width:100%;
    height:100%;
    margin-left:10px!important;
    margin-left:0px;
    padding-left:0px;
    display:block;
	text-align:center; 
	border-left: 1px #579BC0  solid; 
	border-right: 1px #579BC0  solid;
	
} 

#left  .focus{
  background-color: #99CC57;
  width:100%;
  background-image:url();
}
#left  .focus  span{
  background-image: url();
  border: 0px;
}
  /*右边*/
#div_help #div_main  #right{
	float: right;
	width:796px;
	height:910px;
	background-color: #99CC57;
}
#right .frame_help{
    margin-top:10px;
   	width: 786px;
   	height:890px;
   	background-color:white;
}

</style>
<script>
/*
*url  要更新的URL
*topid 被选中的ID
*length 要遍历的长度
*/
  function  doOnClick(url,topid,length){
      var   hdetailFrame=document.getElementById("hdetailFrame");
      hdetailFrame.src=url;
      for(var i=0;i<length;i++){
          if(i==topid){
              document.getElementById("topid"+topid).className="focus";
          }else {
              document.getElementById("topid"+i).className="";
          }
      }
     
  }
/**
*根据是否有传编号来判断加载的页面
*nid 编号
*/
  function   indexLink(nid){
      var   hdetailFrame=document.getElementById("hdetailFrame");
      if(nid==0){
         hdetailFrame.src="<%=webRoot%>/helpcenter/defaulhelp.jsp";
      }else { 
         hdetailFrame.src="<%=webRoot%>/helpcenter/helpdetail.jsp?nid="+nid;
      }
     
  }
</script>
</head>
<body   onload="indexLink(<%=nid%>)">

<div id="div_help">
<div id="div_main"> <!-- 内主要层begin -->
   <div id="left"> <h1></h1>
      <div class="div_space"></div>
      <ul>
         <%if(topic.length>0){
           String  focus="focus";
           String  fnid="";
           String  url="";
           int  len=topic.length;
          // int  mlen=len+1;
           String topid="";
           //String  mtopid="topid"+mlen;
         %>
         <% for (int i=0; i<topic.length; i++){
               fnid=topic[i].getString("nid");
               url=webRoot+"/helpcenter/helpdetail.jsp?nid="+topic[i].getString("nid");
               topid="topid"+i;
               if(nid.equals(fnid)){
                   focus="focus";
               }else {
                  focus="";
               }
           %>
           <li  id="<%=topid%>"  class="<%=focus%>">
             <a href="#" onclick="doOnClick('<%=url%>','<%=i%>','<%=len%>');">
             <span onmouseout="this.className='mover'"  
              onmouseover="this.className='focus'"><%=topic[i].getString("title")%></span></a>
           </li>
         <%} 
         }%>
      </ul>
   </div>
   <div id="right">
       <iframe  name="hdetailFrame" id="hdetailFrame" class="frame_help"
        src="" 
           scrolling="auto"  frameborder="0"></iframe>
   </div>
</div> <!--内主要层end -->
	
</div><!-- 最外层end -->
</body>
</html>