CSS - 保持导航选项卡移动到位或顶部

时间:2015-07-02 07:33:21

标签: css3

已经调整了一些编码 - 更喜欢标签导航 - 将div保持在原位而不是翻到顶部并失去位置。

因此,当点击导航标签时 - 它弹出到该区域并将标题/标签放在上面的位置。所以基本上只想保持导航清洁和静止......

任何想法/想法都赞赏..

<script type="text/javascript" src="addclasskillclass.js"></script>
<script type="text/javascript" src="attachevent.js"></script>
<script type="text/javascript" src="addcss.js"></script>
<script type="text/javascript" src="tabtastic.js"></script>

<STYLE type="text/css">
    .tabset_tabs    { margin:0; padding:0; list-style-type:none; position:relative; white-space:nowrap }
    .tabset_tabs li { margin-left: 1%; padding:2px; display:inline }
    .tabset_tabs a  { 
        font-family: Verdana; font-size: 12pt; font-weight: normal;
        color:#fff ! important; 
        <cfoutput>background-color:#set.fcol#; ! important; </cfoutput>
        border:1px solid #99c; 
        text-decoration:none; 
        padding-left:7px; 
        padding-right:7px; 
        border-left-width:1px; 
        border-bottom:none 
    }
    .tabset_tabs a:hover    { color:pink ! important; background-color:#eff ! important }
    <cfoutput>
        .tabset_tabs a.active   { 
            color:fff ! important; 
            background-color:#set.bcol# ! important; 
            border-color:black; 
            border-left-width:1px; 
            cursor:default; 
            border-bottom:white; 
            padding-left:7px; 
            padding-right:7px; 
        }
    </cfoutput>

    .tabset_tabs li.firstchild a    { border-left-width:1px }

    .tabset_content { 
        margin-left:1%; 
        margin-right:1%; 
        border:1px solid black; 
        background-color:white; 
        position:relative; 
        z-index:1; 
        padding:5px; 
        display:none }
    .tabset_label   { display:none }

    .tabset_content_active  { 
        display:block;
        padding:5px; 
        <cfoutput>background-color:#set.fcol#; ! important; </cfoutput>
    }

    @media aural{
    .tabset_content,
    .tabset_label   { display:block }
    }
</style>

<ul class="tabset_tabs">
    <li><a href="#sg" class="active"><b>Signed Up</b></a></li>
    <li><a href="#r"><b>Requests</b></a></li>
    <li><a href="#f"><b>Finance</b></a></li>
    <li><a href="#s"><b>Settings</b></a></li>
</ul>
<div id="sg" class="tabset_content">
    <br>
        Stuff Here  
    <br>
</div>
<div id="r" class="tabset_content">
    <br>
        Other Stuff Here...
    <br>
</div>
<div id="f" class="tabset_content">
    <br>
        Even More Stuff  
    <br>
</div>

0 个答案:

没有答案