使用javascript淡入淡出

时间：2015-09-14 20:14:05

标签： javascript html css

我有一个选择器，允许我在三种类型的笔记本电脑之间进行选择。然而，当选择一个品牌的笔记本电脑时，该品牌的3种类型必须作为单选按钮出现。我试图让javascript淡入/淡出。因此，如果我选择toshiba，东芝的类型会淡入，如果我选择另一个品牌，当前品牌显示淡出而另一个淡入。我尝试了js淡入/淡出功能但我不确定如何改变它以淡入/淡出几个元素。有什么帮助吗？

<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="custom.css">

</HEAD>

<body>
    <div id="laptop">
        <form>
            <select>
              <option id="handle" value="toshibalap" selected>toshiba</option>
              <option id="handle" value="acerlap">acer</option>
              <option id="handle" value="hplap">hp</option>
            </select> 
                <div id="slideSource">
                    <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                    <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                    <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
                </div>
                <div id="acer">
                    <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                    <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                    <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
                </div>
                <div id="hp">
                    <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                    <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                    <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
                </div>

        </form>

     </div>

<script>
var slideSource = document.getElementById('slideSource');

document.getElementById('handle').onclick = function(){
    slideSource.className = slideSource.className ? '' : 'fade';
}

</script>
</body>


</HTML>

CSS：

div#slideSource {
opacity:1;
transition: opacity 1s; 
}

div#slideSource.fade {
opacity:0;
}

3 个答案:

答案 0 :(得分：1)

如果您不想使用JQuery，则可以使用onChange事件在每次更改值时分配函数回调。然后，element.style.display =“none”或element.style.display =“block”来显示或隐藏每个元素。

这是我的JsFiddle。在select标记中添加了ID。

HTML：

<div id="laptop">
<form>
    <select id="select">
        <option id="handle" value="toshibalap" selected>toshiba</option>
        <option id="volvocar" value="acerlap">acer</option>
        <option id="saabcar" value="hplap">hp</option>
    </select> 
    <div id="toshiba">
        <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
        <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
        <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
    </div>
    <div id="acer">
        <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
        <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
        <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
    </div>
    <div id="hp">
        <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
        <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
        <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
    </div>
</form>

JS：

var select = document.getElementById("select");
document.getElementById("toshiba").style.display = "block"; //initialized the selected option as "display = block";

select.addEventListener("change", function(event) {
    if(event.target.value == "toshibalap") {
        document.getElementById("toshiba").style.display = "block";
        document.getElementById("acer").style.display = "none";
        document.getElementById("hp").style.display = "none";
    }
    else if(event.target.value == "acerlap") {
        document.getElementById("toshiba").style.display = "none";
        document.getElementById("acer").style.display = "block";
        document.getElementById("hp").style.display = "none";
    }
    else if(event.target.value == "hplap") {
        document.getElementById("toshiba").style.display = "none";
        document.getElementById("acer").style.display = "none";
        document.getElementById("hp").style.display = "block";
    }
});

CSS：

#toshiba {
    display: none;
}

#acer {
    display: none;
}

#hp {
    display: none;
}

答案 1 :(得分：0)

我同意第一条评论，即jQuery会更容易。

HTML 

<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="custom.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</HEAD>

<body>
<div id="laptop">
    <form>
        <select>
          <option id="handle" value="toshibalap" selected>toshiba</option>
          <option id="volvocar" value="acerlap">acer</option>
          <option id="saabcar" value="hplap">hp</option>
        </select> 
            <div id="toshibalap" class="laptops">
                <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
            </div>
            <div id="acerlap" class="laptops">
                <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
            </div>
            <div id="hplap" class="laptops">
                <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
            </div>

    </form>

 </div>

</body>


</HTML>

的jQuery 

jQuery('select').change(function(){
   var val = jQuery(this).val();
   jQuery('.laptops').not('#'+val).fadeOut();
   jQuery('#'+val).fadeIn();
});

希望有所帮助！我确实修改了你的HTML。在膝盖顶部容器中添加了一个类，并将膝盖顶部容器div ID与选择框的值相匹配。

答案 2 :(得分：0)

如果你想保持淡入/淡出，你可以这样做：

更新了HTML：

<div id="laptop">
        <form>
            <select id="sel">
                <option  selected>Select</option>
              <option id="handle" value="toshibalap">toshiba</option>
              <option id="volvocar" value="acerlap">acer</option>
              <option id="saabcar" value="hplap">hp</option>
            </select> 
                <div id="slideSource">
                    <div id="toshiba">
                    <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                    <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                    <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
                        </div>
                <div id="acer">
                    <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                    <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                    <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
                </div>
                <div id="hp">
                    <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                    <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                    <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
                </div>
 </div>
        </form>

     </div>

略微更新的CSS：

#slideSource {
    position:relative;
}

#toshiba, #acer, #hp {
opacity:0;
    position:absolute;

}

#toshiba.fadeout, #acer.fadeout, #hp.fadeout {
opacity:0;
transition: opacity 1s; 
}
#toshiba.fadein, #acer.fadein, #hp.fadein {
    opacity:1;
    transition: opacity 1s;
}

和JS：

document.getElementById('sel').onchange = function(){
var slideSource = document.getElementById('slideSource');  

    target=this.value.replace('lap','');



    divs=slideSource.getElementsByTagName('div');

   for(i=0;i<divs.length;i++) {
       if(divs[i].id!=target) {
          divs[i].className =  'fadeout';

       }
       else {
           divs[i].className =  'fadein';
       }

   }
}

DEMO＆GT; http://jsfiddle.net/3qfgyzrz/

相关问题
最新问题