html - ASP.NET MVC 中的选项卡

Question

我想在asp.net mvc页面中引入TAB结构。我怎样才能做到这一点？提前致谢。

Answer 1

选项卡结构是一个简单的 ul-li

<ul id="tabs" >  
   <li>Tab1</li >  
   <li>Tab2</li >  
<ul >

重要的是，当您导航到选项卡时，将元素 (li) 设置为一个不同的类，该类用某种边框框住元素(在此 css 中使用 activeLi)

CSS:

#tabs a:link, #tabs a:visited
{
    color : #666;
    padding:5px;
}

#tabs a:link:active, #tabs a:visited:active, #tabs a:hover, .ui-state-active {
    text-decoration:none;
    border:solid 1px #8EDF53;
    border-bottom:solid 2px #fff;
    padding:5px;
}

.activeLi a
{
    text-decoration:none;
    border:solid 1px #8EDF53;
    border-bottom:solid 2px #fff;
    padding:5px; 
}

#tabs
{
    text-align:right;
    border-bottom : 1px solid #8EDF53;
    margin-bottom:20px;
}

#tabs li
{
    display:inline;
}

这段代码看起来像: alt text http://s3.amazonaws.com/twitpic/photos/large/17838970.png?AWSAccessKeyId=0ZRYP5X5F6FSMBCCSE82&Expires=1247824102&Signature=X6%2F8QujBSGzp9iPvh5ocvEj5a8c%3D

当然jQuery也有一个插件:jQuery core和 jQuery tabs