<table style=”cursor: pointer;” onclick=”window.open(‘http://www.52sonen.com/’, ‘_blank’)” width=”100%”>
<tbody>
<tr>
<td height=”100″ bgcolor=”#000000″></td>
</tr>
</tbody>
</table>

我的想法：

在顶部按钮，内容放在在不同的DIV标签里，
点击其中一个按钮，它会显示相关的内容;
单击其他按钮，隐藏前一个凸显当前内容。

设计图：

2。 HTML
在上述设计图下，在UL＃tabMenu是在顶部又名标签的按钮。里面boxBody，您需要指定的5个DIV，DIV的数量，将取决于有多少项目。JavaScript的加载内容的DIV的指数为基础。例如，如果您单击第一个按钮（星或索引0），它将加载的boxBody第一个DIV（DIV的索引为0）。因此，DIV的编排必须与对应按钮一致。

<div>   
   <ul id=”tabMenu”>  
    <li></li> <!– default button–>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
  </ul>   
  <div></div>   
   <div>  
    <!– default page–>  
    <div id=”posts”>  
      <ul>  
        <li>Post 1</li>  
        <li>Post 2</li>  
        <li>Post 3</li>  
      </ul>    
    </div>    
    
    <div id=”comments”>  
      <ul>  
        <li>Comment 1</li>  
        <li>Comment 2</li>  
        <li>Comment 3</li>  
      </ul>  
    </div>  
    
    <div id=”category”>  
      <ul>  
        <li>Category 1</li>  
        <li>Category 2</li>  
        <li>Category 3</li>  
      </ul>    
    </div>  
    
    <div id=”famous”>  
      <ul>  
        <li>Famous post 1</li>  
        <li>Famous post 2</li>  
        <li>Famous post 3</li>  
      </ul>    
    </div>  
    
    <div id=”random”>  
      <ul>  
        <li>Random post 1</li>  
        <li>Random post 2</li>  
        <li>Random post 3</li>  
      </ul>      
    </div>           
  </div>   
 <div></div>   
  </div>

 3。 CSS
您可以随时修改，以符合您的网站。我会附上本教程在下载和编辑的CSS仔细PSD文件。

<style>  
 
a {  
    color:#ccc;  
    text-decoration:none;  
}  
 
a:hover {  
    color:#ccc;  
    text-decoration:none  
}  
 
#tabMenu {  
    margin:0;  
    padding:0 0 0 15px;  
    list-style:none;  
}  
 
#tabMenu li {  
    float:left;  
    height:32px;  
    width:39px;  
    cursor:pointer;  
    cursor:hand  
}  
 
/* this is the button images */  
li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}  
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}  
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}  
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}  
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}  
 
li.mouseover {background-position:0 0;}  
li.mouseout {background-position:0 -32px;}  
li.selected {background-position:0 0;}  
 
.box {  
    width:227px  
}  
 
.boxTop {  
    background:url(images/boxTop.gif)no-repeat;  
    height:11px;  
    clear:both  
}  
 
.boxBody {  
    background-color:#282828;  
}  
 
.boxBottom {  
    background:url(images/boxBottom.gif) no-repeat;  
    height:11px;  
}  
 
.boxBody div {  
    display:none;  
}  
 
.boxBody div.show {  
    display:block;  
}  
 
 
.boxBody #category a {  
    display:block  
}  
 
/* styling for the content*/  
.boxBody div ul {  
    margin:0 10px 0 25px;  
    padding:0;  
    width:190px;  
    list-style-image:url(images/arrow.gif)  
}  
 
.boxBody div li {  
    border-bottom:1px dotted #8e8e8e;   
    padding:4px 0;  
    cursor:hand;  
    cursor:pointer  
}  
 
.boxBody div ul li.last {  
    border-bottom:none  
}  
 
.boxBody div li span {  
    font-size:8px;  
    font-style:italic;   
    color:#888;  
}  
 
/* IE Hacks */  
*html .boxTop {margin-bottom:-2px;}  
*html .boxBody div ul {margin-left:10px;padding-left:15px;}  
 
</style>

4。 Javascript
好了，我花了一段时间读了jQuery文件，并写下了Javascript代码。

<SCRIPT type=”text/javascript”>  
 
$(document).ready(function() {    
 
  //Get all the LI from the #tabMenu UL  
  $(‘#tabMenu > li’).click(function(){  
          
    //perform the actions when it’s not selected  
    if (!$(this).hasClass(’selected’)) {      
 
    //remove the selected class from all LI      
    $(‘#tabMenu > li’).removeClass(’selected’);  
      
    //After cleared all the LI, reassign the class to the selected tab  
    $(this).addClass(’selected’);  
      
    //Hide all the DIV in .boxBody  
    $(‘.boxBody div’).slideUp(‘1500′);  
      
    //Look for the right DIV index based on the Navigation UL index  
    $(‘.boxBody div:eq(‘ + $(‘#tabMenu > li’).index(this) + ‘)’).slideDown(‘1500′);  
      
   }  
 
  }).mouseover(function() {  
 
    //Add and remove class, Personally I dont think this is the right way to do it,   
    //if you have better ideas to toggle it, please comment      
    $(this).addClass(‘mouseover’);  
    $(this).removeClass(‘mouseout’);     
      
  }).mouseout(function() {   
      
    //Add and remove class  
    $(this).addClass(‘mouseout’);  
    $(this).removeClass(‘mouseover’);      
      
  });  
 
    
  //Mouseover with animate Effect for Category menu list    
  $(‘.boxBody #category li’).mouseover(function() {  
 
    //Change background color and animate the padding  
    $(this).css(‘backgroundColor’,'#888′);  
    $(this).children().animate({paddingLeft:”20px”}, {queue:false, duration:300});  
  }).mouseout(function() {  
      
    //Change background color and animate the padding  
    $(this).css(‘backgroundColor’,”);  
    $(this).children().animate({paddingLeft:”0″}, {queue:false, duration:300});  
  });    
      
  //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.  
  $(‘.boxBody li’).click(function(){  
    window.location = $(this).find(“a”).attr(“href”);  
  }).mouseover(function() {  
    $(this).css(‘backgroundColor’,'#888′);  
  }).mouseout(function() {  
    $(this).css(‘backgroundColor’,”);  
  });     
      
});  
 
</SCRIPT>  

 5。 最后，
终于，一个漂亮的侧jQuery的TAB标签式菜单出炉了！

然而，在分类页面，如果你使用IE的LI不能hightlighted鼠标悬停时，（这就是为什么我们都讨厌IE浏览器）。如果您知道什么问题，请告知：）

本人E文不行，原文请看这里：http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial

点击预览

<iframe width=”100%” src=”http://www.hezc.com/” frameBorder=”0″ scrolling=”no” allowTransparency=”true” name=”autoHeight” onload=”this.height=autoHeight.document.body.scrollHeight”></iframe>

<!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”>
<head>
</head>
<body>
<h1>下面是Iframe 取的页面内容 </h1>
<iframe width=”100%” src=”http://www.hezc.com/” frameBorder=”0″ scrolling=”no” allowTransparency=”true” name=”autoHeight” onload=”this.height=autoHeight.document.body.scrollHeight”></iframe>
</body>
</html>

文章出处：http://www.hezc.com/article.asp?id=88

这里提供了经常被用到的关于flash盖住层的解决办法.

通常的办法是将flash设置为透明，给flash增加两个参数
<object>中加入 <param name=”wmode” value=”transparent” />
<embed>中加入 wmode=”transparent”
我这样做了，然而结果是在firefox中正常了，而 IE7,Opera,和Safari中均无效，层依然被flash盖住，尝试给层加上最优顺序z-index依然无法解决flash盖住层的问题尝试将flash放入层中，依然无法解决，在层与flash的优先顺序中,flash似乎总是优先于层的冥思苦想了1分钟，发现问题在这里，在dreamweaver 8中自动给swf加入了一个控件AC_FL_RunContent(),这是一个js函数，就是避免在IE中需要激活swf控件的函数，看到里面有设置宽度，高度和flash来源之类的东西，我想是不是需要在这里也添加呢？按照AC_FL_RunContent()参数的格式测试了一下，结果通过

附代码如下，见橙色标志
<script type=”text/javascript”>
AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0′,
‘width’,'600′,’height’,'170′,’src’,'dayanmei.com’,'quality’,'high’,’wmode‘,‘transparent‘,
‘pluginspage’,'http://www.macromedia.com/go/getflashplayer’,'movie’,'banner’ ); //end AC code
</script><noscript><object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”600″ height=”170″>
<param name=”movie” value=”dayanmei.com.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
 <embed src=”dayanmei.com.swf” wmode=”transparent” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”600″ height=”170″></embed>
</object>
</noscript>

至此解决了 IE7,Opera,和Safari中flash盖住层(覆盖层)的问题。

可扩展性强，复用性高：组件提供了基本常用的功能，在此基础上可根据个人需要增加相应功能，只需要增加少量代码即可开发 出各种弹出窗口。而且窗口的内容页和框架也是相互独立的，设计好框架后你只要更改内容页即可。
组件调用灵活：在同一页面可以调用任意多个弹出窗口，而且最突出的是在同一页面可以弹出不带遮罩和带遮罩的窗口混用。
支持所有主流浏览器：IE6+，Firefox2.0+，Chrome(谷歌浏览器)，Opera9.5+，Safari3.0+等。（题外音：个人觉得Opera最好用，打开 网页的速度是我上面列出所有浏览器中最快的，不是指打开我的组件，而是打开任何网页个人感觉速度很 快，而且人性化设计也是比较突出的。不是做广告噢:-)…）
本人编写组件一直争取能在满足使用的情况下做到代码最简洁，执行效率高，所以有些不太实用的功能就没有加上，如朋友们需要 可自行加上，或与我共同探讨也可。

二、组件结构
lhgdialog.js：组件主调用文件，在调用的地方只需要该文件。
lhgdialog.html：组件窗口静态模板文件，控制窗口样式及对窗口的操作。
lhgdialog.css：组件窗口样式表文件。
_content.html：组件窗口内容页示例文件，此页面由用户自己随意定制。
_samples.html：调用组件示例页，即此页面。
images：窗口所有图片文件夹
三、调用方法及参数说明
在需要调用的页面引入lhgdialog.js，例如：<script type=”text/javascript” src=”lhgdialog.js”></script>
然后在要调用的位置上引发的事件中加入调用代码，例如：<input type=”button” onclick=”lhgdialog.opendlg(…);”/> 或者在onclick=这写个自己的函数，如：open();然后再在JS的部位里加个function open()函数，再在里面调用lhgdialog.opendlg
参数说明：lhgdialog.opendlg是主调函数，他共有7个参数，详细如下：
lhgdialog.opendlg( 窗口标题，内容页，窗口宽，窗口高，是否显示遮罩层，弹出窗口距顶部距离，弹出窗口距左边距离 ）
例如：lhgdialog.opendlg( ‘登录窗口’, ‘login.html’, 400, 300 ); 后面的参数如果不用可以省略
  lhgdialog.opendlg( ”, ‘ok.html’, 600, 480, true, 100, 200 ); 如果前面有不填的参数就用”就可以了，但不可省略。

下载地址：http://www.rayfile.com/files/ac8fb414-6261-11de-9adf-0014221b798a/

预览图：

点击此处查看预览
由于今天虚拟主机有出问题，FTP一直有问题，没法登陆。预览效果和下载文件，明天联系他们再放出来吧，也借此机会鄙视一下中网互联~垃圾服务商，态度虽好，服务不行顶P用！！！

可以登陆FTP了。

此处下载

直接预览吧：http://www.sonyes.cn/demo/qqdemo/index.htm

觉得效果有用的，请这里下载：嫌麻烦不想注册的请绕行！点击下载

说了这么多，来看一下预览
吧

详细的说明我觉得就不必要了，如果又需要的同学可以点击下载此压缩包

就不放出截图了，可以查看预览效果，如下：

http://www.sonyes.cn/demo/down/demo.html

今天由于有其他事情就不放出制作压缩包了，我相信如果你需要你是可以得到这个效果所用到的文件的，你说是吧，查看预览，另存文件。