问答详情
源自:10-1 编程挑战

如果要实现选项卡自动切换呢,应该添加什么代码?

是否可以设置间隔时间,如3秒,选项卡自动切换。

函数应该如何改动?

提问者:qq_无边_03555125 2016-07-12 10:26

个回答

  • 慕粉3197089
    2016-07-12 15:15:13

    function f1(){
            //只是为了改变点击后的样式,重复代码很多,造成重复劳动,后期可调整成循环
            document.getElementById("first").style.display="block";
            document.getElementById("second").style.display="none";
            document.getElementById("third").style.display="none";
            document.getElementById("tag1").style.borderTopColor="red";
            document.getElementById("tag1").style.borderTopWidth="2px";
            document.getElementById("tag1").style.borderBottomWidth="2px";

            document.getElementById("tag2").style.borderTopColor="blue";
            document.getElementById("tag2").style.borderTopWidth="1px";
            document.getElementById("tag2").style.borderBottomWidth="1px";

            document.getElementById("tag3").style.borderTopColor="blue";
            document.getElementById("tag3").style.borderTopWidth="1px";
            document.getElementById("tag3").style.borderBottomWidth="1px";
        }
        function f2(){
            document.getElementById("first").style.display="none";
            document.getElementById("second").style.display="block";
            document.getElementById("third").style.display="none";
            document.getElementById("tag1").style.borderTopColor="blue";
            document.getElementById("tag1").style.borderTopWidth="1px";
            document.getElementById("tag1").style.borderBottomWidth="1px";


            document.getElementById("tag2").style.borderTopColor="red";
            document.getElementById("tag2").style.borderTopWidth="2px";
            document.getElementById("tag2").style.borderBottomWidth="2px";

            document.getElementById("tag3").style.borderTopColor="blue";
            document.getElementById("tag3").style.borderTopWidth="1px";
            document.getElementById("tag3").style.borderBottomWidth="1px";

        }
        function f3(){
            document.getElementById("first").style.display="none";
            document.getElementById("second").style.display="none";
            document.getElementById("third").style.display="block";
            document.getElementById("tag1").style.borderTopColor="blue";
            document.getElementById("tag1").style.borderTopWidth="1px";
            document.getElementById("tag1").style.borderBottomWidth="1px";

            document.getElementById("tag2").style.borderTopColor="blue";
            document.getElementById("tag2").style.borderTopWidth="1px";
            document.getElementById("tag2").style.borderBottomWidth="1px";

            document.getElementById("tag3").style.borderTopColor="red";
            document.getElementById("tag3").style.borderTopWidth="2px";
            document.getElementById("tag3").style.borderBottomWidth="2px";
        }


    这个比较通俗,你可以换成循环,代码就比较简单