jQuery的标签式界面/菜单选项卡式效果

 

如今，有很多网站使用，以此来节省空间的标签在网页基础的内容。我已经看到了使用其类别，文章，评论和标签式界面，内容随机职位wordpress的很多网站。这是一个很好的"太空金丹"，如果用它正确，它可以提高你网站的可用性以及。权，首先，我们需要有这种想法和标签式界面的设计结构。

在我们开始之前，如果你是一个web托管公司来看，这是一个很好的评价 - hostgator的进展。

我的想法：
在上面，内容按钮居住在不同的div元素，
点击其中的一个按钮，它显示了有关内容;
点击其他按钮，它隐藏了现有的和正确的显示。
设计结构：

html
在上图中doesn't负载的情况下，请允许我再次解释了设计结构。在ul＃tabmenu在顶部又名标签的按钮。这是你点击，它会触发的载荷内容jquery的。

内boxbody，您需要指定5的div，在div的数量将取决于有多少物品定义＃tabmenu在这种情况下，我们有5个，therefre，你需要5的div定义的元素。boxbody。

网页特效的负荷的div的指数为基础的内容。boxbody。例如，如果你点击?在。boxbody（div的索引为0）第一个按钮（或指数0星），它会载入第一个div。

因此，div的安排英寸boxbody必须与按键在＃tabmenu安排。

 

   

   

   

   

   

 

 

 

   
   

     

       
• post 1

       
• post 2

       
• post 3

     

 
   

 
 
   

     

       
• comment 1

       
• comment 2

       
• comment 3

     

   

 
  

     

       
• category 1

       
• category 2

  
• category 3

     

 
    

 
   

     

       
• famous post 1

     
• famous post 2

     
• famous post 3

  

 
   

 
 

  

       
• random post 1

    
• random post 2

     
• random post 3

     

   
 

       

 

 

css教程代码

js代码

最后
你会得到一个美丽的jquery分页的菜单！

然而，在分类页面，如果你使用ie浏览器，礼不能当鼠标悬停hightlighted它（这就是为什么大家都讨厌ie浏览器）。如果你知道这是什么问题，请告知：）

最后但并非最不重要，检查了演示或下载源代码，使用它。任何问题。请留下您的评论：）

支持我的书签这篇文章和分享给您的朋友：）谢谢