JS基础——选项卡列表显示隐藏缩略图(函数传参)

最新推荐文章于 2024-01-10 10:47:02 发布
weixin_33845477
最新推荐文章于 2024-01-10 10:47:02 发布
阅读量139
点赞数
原文链接：http://www.cnblogs.com/bokebi520/p/5001124.html
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基础——选项卡列表显示隐藏缩略图(函数传参)</title>
    <style>
    *{ padding: 0; margin: 0;}
    li{ list-style: none; font-size: 12px;}
    a{ text-decoration: none; color: #333;}
    img{ border: none; vertical-align: top;}
    .clearfix{ zoom: 1; }
    .clearfix:after{ clear: both; display: block; content: ""; visibility: hidden; height: 0; }
    #tab{ width: 301px; margin: 20px auto; }
    .tab-bt{ border-top: 2px solid #206F96; border-left: 1px solid #ccc;  height: 30px; line-height: 30px;}
    .tab-bt li{ width: 99px; float: left; text-align: center;  background: #eee; border-right: 1px solid #ccc; font-size: 14px;}
    .tab-bt li a{ display: block;}
    .tab-bt li a.active{ background: #fff;}
    .tab-nr{ display: none;}
    .tab-nr2{ display: none;}
    .tab-nr1{ padding: 15px 10px 0; font-size: 14px;}
    .tab-nr1 a:hover{ color: red; text-decoration: underline;}
    .tab-nr2{ padding: 10px;}
    </style>
    <script>
    // 封装class函数    
    function getByClass(oParent,sClass){
        var arr = [];
        var aElement = oParent.getElementsByTagName('*');
        for(var i = 0; i<aElement.length; i++){
            if(aElement[i].className == sClass){
                arr.push(aElement[i]);
            }
        }
        return arr;
    };

    window.onload = function(){
        // 获取元素
        var oDiv = document.getElementById('tab');
        var oTabUl_bt = getByClass(oDiv,'tab-bt')[0];
        var aATab_bt = oTabUl_bt.getElementsByTagName('a');
        var aTab_nr = getByClass(oDiv,'tab-nr');

        // 选项卡切换
        for(var i = 0; i<aATab_bt.length; i++){
            aATab_bt[i].index = i;
            aATab_bt[i].onmouseover = function(){
                for(var i = 0; i<aATab_bt.length; i++){
                    aATab_bt[i].className = '';
                    aTab_nr[i].style.display = 'none';
                }
                aATab_bt[this.index].className = 'active';
                aTab_nr[this.index].style.display = 'block';
            };
        }

        // 显示隐藏缩略图(函数传参)
        function tabDetail(oTabUl){
            var aLi = oTabUl.getElementsByTagName('li');    
            for(var i = 0; i<aLi.length; i++){
                aLi[i].onmouseover = function(){
                    var oTab_nr1 = getByClass(this,'tab-nr1')[0];
                    var oTab_nr2 = getByClass(this,'tab-nr2')[0];
                    oTab_nr1.style.display = 'none';
                    oTab_nr2.style.display = 'block';
                };
                aLi[i].onmouseout = function(){
                    var oTab_nr1 = getByClass(this,'tab-nr1')[0];
                    var oTab_nr2 = getByClass(this,'tab-nr2')[0];
                    oTab_nr1.style.display = 'block';
                    oTab_nr2.style.display = 'none';
                };
            }
        };
        
        /*tabDetail(aTab_nr[0]);
        tabDetail(aTab_nr[1]);
        tabDetail(aTab_nr[2]);*/

        for(var i = 0; i<aTab_nr.length; i++){
            tabDetail(aTab_nr[i]);
        }
    };

    </script>
</head>
<body>
    <div id="tab">
        <ul class="tab-bt">
            <li><a class="active" href="#">选项1</a></li>
            <li><a href="#">选项2</a></li>
            <li><a href="#">选项3</a></li>
        </ul>
        <ul class="tab-nr" style="display:block;">
            <li>
                <div class="tab-nr1">
                    <a href="#">1标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>1标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">1标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>1标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">1标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>1标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">1标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>1标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">1标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>1标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">1标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>1标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
        </ul>
        
        <ul class="tab-nr">
            <li>
                <div class="tab-nr1" style="display:none;">
                    <a href="#">2标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2" style="display:block;">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>2标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">2标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>2标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">2标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>2标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">2标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>2标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">2标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>2标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">2标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>2标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
        </ul>
        <ul class="tab-nr">
            <li>
                <div class="tab-nr1" style="display:none;">
                    <a href="#">3标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2" style="display:block;">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>3标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">3标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>3标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">3标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>3标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">3标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>3标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">3标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>3标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
            <li>
                <div class="tab-nr1">
                    <a href="#">3标题文字部分，不显示图片</a>
                </div>
                <div class="tab-nr2">
                    <a href="#">
                        <img src="img/thumbnail.jpg" alt="" />
                        <strong>3标题文字部分，不显示图片</strong>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
转载于:https://www.cnblogs.com/bokebi520/p/5001124.html
weixin_33845477
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础——选项卡列表显示隐藏缩略图(函数传参)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS基础——选项卡列表显示隐藏缩略图(函数传参)</title> <style> *{ padding: 0; margin: ...
复制链接

扫一扫