`
lz726
  • 浏览: 335324 次
  • 性别: Icon_minigender_2
  • 来自: 福建,福州
社区版块
存档分类
最新评论

左侧TAB页效果

CSSJSPXHTMLHTML 
阅读更多 
<%@ 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>

 

分享到：
| 在路上
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    左侧导航与tab页切换HTML示例

    在网页设计中，左侧导航和tab页切换是常见的交互元素，它们可以有效地组织内容并提供用户友好的浏览体验。下面将详细阐述这两种设计模式的工作原理、实现方式以及它们在实际应用中的重要性。 首先，左侧导航通常指...

    左侧tab切换Web 页面

    "tabnormal.png"和"tabselect.png"可能是未选中和选中状态下的Tab图标，这些图片可以通过CSS的`background-image`属性应用到Tab元素上，以实现视觉上的切换效果。 总的来说，创建左侧Tab切换Web页面涉及到前端开发...

    多款精美的tab页签样式任你挑选

    在网页设计中，Tab页签是一种常见的用户界面元素，它能有效地组织和展示大量信息，让用户在多个相关但独立的内容区域之间轻松切换。本资源包提供了多款精美的Tab页签样式，旨在提升用户体验，让网页布局更加清晰、...

    layui点击导航栏刷新tab页的示例代码

    具体的方法是通过修改tab组件的配置项中的autoRefresh属性来达到效果。在未修改之前，autoRefresh的默认值为false，意味着标签页切换时不会自动刷新；而将其设置为true后，则会在每次切换标签页时自动进行刷新操作。...

    Android垂直tab导航栏、左侧竖直tab导航栏

    "Android垂直tab导航栏、左侧竖直tab导航栏"就是这样一个设计，它允许用户在屏幕左侧以竖直的方式浏览和选择不同的选项卡，提供了一种不同于传统水平选项卡的新颖体验。 这个设计不仅支持使用ViewPager，而且可以...

    左侧点击菜单tab切换网页特效

    在IT行业中，网页交互设计是用户体验的关键因素之一，而“左侧点击菜单tab切换网页特效”是一种常见的网页设计手法，主要用于提升网站的导航性和用户友好性。这种特效使得用户可以通过左侧的菜单栏轻松地在不同的...

    经典手风琴风格各种Tab切换效果

    在IT界，用户界面设计是至关重要的一环，而Tab切换效果是提高用户体验的常用方法之一。"经典手风琴风格各种Tab切换效果"是这样一个集合，它提供了多种不同样式的Tab切换实现，每种都有过渡动画，使得交互更加生动...

    滑动菜单+Tab页

    在移动应用设计中，"滑动菜单+Tab页"是一种常见的布局模式，广泛应用于各种类型的APP，如新闻、社交、电商等。这种设计模式能够高效地组织内容，提供良好的用户体验，让用户可以轻松浏览和切换不同的功能区域。接...

    jQuery左侧点击tab切换代码.zip

    总结起来，"jQuery左侧点击tab切换代码.zip"是一个实用的资源，它演示了如何使用jQuery实现一个常见的网页交互功能。了解并掌握这种技术对于提升网页的用户体验至关重要，同时也展示了jQuery库的强大之处。通过研究...

    左侧竖直tab导航栏

    在这种背景下，“左侧竖直tab导航栏”是一个常见的设计模式，它使得用户能够更直观、高效地浏览和导航多层级的内容。这个设计通常适用于内容丰富的应用，让用户能够轻松访问各个功能模块或类别。 ...

    码农jQuery页签切换Tab标签切换+导航栏+手风琴

    首先，我们来看"jQuery_tab.html"，这通常是一个展示页签切换效果的示例页面。页签切换是一种常见的UI设计元素，用于在有限的空间内展示大量内容。通过jQuery，我们可以轻松地创建这样的功能。基本思路是利用CSS定义...

    右滑动tab菜单jQuery代码

    例如，可以通过设置`display`属性来控制各个tab的可见性，通过`transition`实现平滑的滑动效果。 接着，`index.html`是项目的主页面文件，它包含了HTML结构。在实现右滑动tab菜单的HTML部分，通常会有一个包含多个...

    支持滚动的TAB切换效果.rar

    支持滚动的TAB切换效果，这是一个完整的例子，含 JS和HTML代码文件，鼠标点击左侧的TAB后，右侧的内容向上或向下滚动，本例子是一个实例集，包括标题展开合拢效果、TAb效果、上下结构的TAB切换等多种风格，一共是5个...

    jQuery左侧Tab切换的图片滑块插件

    **jQuery左侧Tab切换的图片滑块插件** 在网页设计中，为了提升用户体验，经常会使用到动态展示内容的组件，其中一种常见的方式是通过Tab切换配合图片滑块来展示信息。jQuery作为一款强大的JavaScript库，提供了丰富...

    多种不同方向风格的tab标签切换效果

    本资源“多种不同方向风格的tab标签切换效果”提供了丰富的选项，帮助开发者和设计师实现各种方向上的标签切换，包括顶部、底部、左侧和右侧，以适应不同应用场景和用户需求。 1. Tab标签的基本概念： Tab标签是一...

    js实现左侧网页tab滑动门效果代码

    在本文中，我们将探讨如何使用JavaScript实现一种左侧网页Tab滑动门效果。这种效果通常用于网页设计，为用户提供更直观的导航体验。通过动态切换元素的属性，我们可以创建一个开口靠左的滑动门式菜单，适用于各种...

    左侧显示的tab选项卡菜单.rar

    左侧显示的tab选项卡菜单，一般的TAB是显示在顶部，也就是上边，下面才显示对应的内容，这款TAB是左侧显示导航，右侧显示主体内容，用本款TAB你就可设计成一个“关于我们”的页面，就比如本示例的菜单效果，比较不错...

    jQuery左侧点击tab切换代码.rar_Tabú_jQuery左侧点击tab切换代码_realo1r_tab 切换代码

    在本文中，我们将深入探讨如何实现一个基于jQuery的左侧点击tab切换效果，这通常用于创建交互式的网页界面。"jQuery左侧点击tab切换代码"是一种常见的前端开发技术，它允许用户通过点击页面左侧的选项卡来切换不同的...

    android实现两层tab嵌套

    3. `TabLayout`配合`PagerAdapter`：`TabLayout`是Android Design Support Library的一部分，用于展示Tab，与`ViewPager`结合可以实现Tab的可视化切换效果。`PagerAdapter`是`ViewPager`的数据适配器，负责为每个Tab...

    TAB-左侧滚动菜单

    "TAB-左侧滚动菜单"是一个采用CSS技术实现的网页导航组件，旨在为用户提供简洁、大气且易于操作的左侧滚动式菜单。在这个项目中，我们将探讨CSS在创建这种导航菜单中的应用，以及如何通过CSS实现动态效果。 首先，...

Magicbox
Global site tag (gtag.js) - Google Analytics