兼容性较好的悬浮切换选项卡及其在Jimdo网站上的应用

      在很多门户网站的首页上,经常看到选项卡的应用。因选项卡具有占用空间小,辐射内容大的特点,可以在有限的页面内展现更多的内容,使网页显得更紧凑,因此得到广泛应用。

      以往的选项卡是通过对标签的点击来实现内容的切换,而现在流行的是悬浮切换,即鼠标滑过标签就可以迅速切换区域内容。网上邻居在网上搜索了一下,发现不少悬浮切换的选项卡,不是存在着兼容问题,就是代码太复杂了。经过筛选和整理,本文介绍一种比较简洁的悬浮切换的选项卡代码,兼容性较好,感兴趣的朋友可以将它放到自己的Jimdo网站上试试。

      它的效果如下,样式不是很漂亮,有些CSS知识的朋友可以自己再修改一下。

CSS代码:

.board{width:570px;}
.board_caption{height:27px; background:#d6e7f7; border:1px solid #adcbef;}
.board_caption h2{float:left; width:80px; height:20px; padding:5px 0px 0px 10px; margin-left:10px;line-height:20px; font-weight:normal;}
.board_caption h2 a{display:block; width:100%;}
.board_caption .current{border:1px solid #adcbef;border-bottom:2px solid #fff;background:#fff;}
.board_content{border:1px solid #adcbef; border-top:none;}
.board_content .normal{display:none;}
.board_content .current{display:block;}
.board_content ul{width:98%; overflow:hidden; padding:8px 0px;}
.board_content ul li{display:inline; float:left; width:265px; padding-left:10px;height:20px; overflow:hidden;}
.board_content ul li a{font-size:12px;}

HTML(页面)代码:

<script type="text/javascript">
//<![CDATA[
function secBoard(elementID,listName,n) {
var elem = document.getElementById(elementID);
var elemlist = elem.getElementsByTagName("h2");
for (var i=0; i<elemlist.length; i++) {
elemlist[i].className = "normal";
var m = i+1;
document.getElementById(listName+"_"+m).className = "normal";
}
elemlist[n-1].className = "current";
document.getElementById(listName+"_"+n).className = "current";
}
//]]>
</script>
<div class="board">
    <div class="board_caption" id="hotnews_caption">
        <h2 class="current">
            <a href="链接地址" target="_blank" onmousemove="secBoard ('hotnews_caption','newslist',1);">标题一</a>
        </h2>

        <h2 class="normal">
            <a href="链接地址" target="_blank" onmousemove="secBoard ('hotnews_caption','newslist',2);">标题二</a>
        </h2>

        <h2 class="normal">
           <a href="链接地址" target="_blank" onmousemove="secBoard ('hotnews_caption','newslist',3);">标题三</a>
        </h2>
    </div>

    <div class="board_content">
        <div class="current" id="newslist_1">
            <ul>
                  <li>
                    <a href="链接地址">链接文字</a>
                </li>
                 ......
                <li>
                    <a href="链接地址">链接文字</a>
                </li>
            </ul>
        </div>

 

        <div class="normal" id="newslist_2">
            <ul>
                <li>
                    <a href="链接地址">链接文字</a>
                </li>
                 ......
                <li>
                    <a href="链接地址">链接文字</a>
                </li>
            </ul>
        </div>


        <div class="normal" id="newslist_3">
            <ul>
                <li>
                    <a href="链接地址">链接文字</a>
                </li>
                 ......
                <li>
                    <a href="链接地址">链接文字</a>
                </li>
            </ul>
        </div>
    </div>
</div>

      使用过Jimdo的朋友都知道,以上CSS代码可以放到自定义模板的CSS里,也可以放到head部,而HTML代码直接添加到页面上,其中红色部分是JS代码绿色部分是标签(标题)蓝色部分是各个切换区域的内容,演示代码里用的是UL列表,可以根据需要任意更改。

      另外,补充一点。喜欢捣鼓Jimdo网站的朋友都知道,CSS内容搞的太多了,时间久了,会显得非常肿胀。如果不是整个网站都使用的内容,最好在需要的页面上通过<div style="..."></div>实现,另外,推荐一下梁山分坨介绍的JS方法 - 提高jimdo自定义修改编辑CSS的速度的另类方法。比如本文演示用的CSS就是这么做的,它的代码如下,供参考。

<div class="scri">
    <script type="text/javascript">
//<![CDATA[
    var style= document.createElement("style"),head= document.getElementsByTagName("head")[0],css =
    document.styleSheets[0];
    style.type="text/css";
    var csstext={
    ".scri":"position:absolute;width:600px;height:1px;",
    ".board":"width:570px;",
    ".board_caption":"height:27px; background:#d6e7f7; border:1px solid #adcbef;",
    ".board_caption h2":"float:left; width:80px; height:20px; padding:5px 0px 0px 10px; margin-left:10px;line-height:20px; font-weight:normal;",
    ".board_caption h2 a":"display:block; width:100%;",
    ".board_caption .current":"border:1px solid #adcbef;border-bottom:2px solid #fff;background:#fff; margin-top:0px;",
    ".board_content":"border:1px solid #adcbef; border-top:none;",
    ".board_content .normal":"display:none;",
    ".board_content .current":"display:block;",
    ".board_content ul":"width:98%; overflow:hidden; padding:8px 0px;",
    ".board_content ul li":"display:inline; float:left; width:265px; padding-left:10px;height:20px; overflow:hidden;",
    ".board_content ul li a":"font-size:12px;"
    };
    if(document.createStyleSheet){for(key in csstext){try{css.addRule(key,csstext[key]);}catch(e)
    {}}}else{for(key in csstext){try{style.appendChild(document.createTextNode(key+"{"+csstext
    [key]+"}"));}catch(e){}}}head.appendChild(style);
    //]]>
    </script>
</div>

Write a comment

Comments: 8
  • #1

    中国圆号网 (Monday, 28 November 2011 17:06)

    好东西啊。谢谢!

  • #2

    网型网秀 (Monday, 28 November 2011 19:03)

    我也介绍过添加CSS的五种方法,如果只添加个别页的话,可以试用JS,Jimdo后台的广告就使用了这个方法,相信还是能比较稳定的。我的CSS就比较多了,什么时候也打算“减下肥”。

  • #3

    网上邻居 (Monday, 28 November 2011 23:50)

    中国圆号网:
    这个代码还是比较简明的,王老师有空的话,可以把CSS改一下,可以做的很漂亮,比如加些背景图片,弄些圆角之类。

  • #4

    网上邻居 (Monday, 28 November 2011 23:58)

    网型网秀:
    记得“http://jdm.jimdo.com/2011/07/03/jimdo/”这一篇就是跟你讨教的用JS实现腾讯主页CSS的外链,我对JS是一窍不通,希望以后多介绍一些实用的JS代码。

  • #5

    淘宝600家园 (Wednesday, 30 November 2011 11:59)

    邻居介绍这个代码不错,有空要在我那个导航网站上应用一下~~~

  • #6

    yjbo (Wednesday, 30 November 2011 21:17)

    确实好东西啊! 感谢邻居分享、、、

  • #7

    网上邻居 (Wednesday, 30 November 2011 23:30)

    淘宝600家园:
    还做了个导航网站呀?下次告诉下网址,去学学。
    这个选项卡代码还是比较简单的,样式不是太好看,有空再改改。

  • #8

    MCM iPhone 6S Plus Case (Monday, 11 April 2016 17:12)

    One areas where the Galaxy S7 Edge has the iPhone clearly beat is when it comes to focus speeds, as the dual pixel technology instantly locks onto objects.