关于js全局变量无法定义的问题

我主要想实现以下类似功能:通过点击导航栏,下方div内容改变。图片说明图片说明

一开始这串代码测试就会出现变量未定义错误,但是如果多点击几次导航栏一直调用此函数的时候,变量未定义错误又不提示了,并且函数功能正常了。这是为什么?

图片说明

以下为我的导航栏部分代码(由于一直排版有问题,故使用照片,见谅)
图片说明

以下为我需要修改的div部分代码
图片说明

以下为我的所有js代码

function disper1(){
    div1 = document.getElementById("get1");
    div2 = document.getElementById("get2");
    div3 = document.getElementById("get3");
    div4 = document.getElementById("get4");
    div5 = document.getElementById("get5");
    div6 = document.getElementById("get6");
    div1.style.display="inline";
    div2.style.display="none";
    div3.style.display="none";
    div4.style.display="none";
    div5.style.display="none";
    div6.style.display="none";
}

function disper2(){
    div1.style.display="none";
    div2.style.display="inline";
    div3.style.display="none";
    div4.style.display="none";
    div5.style.display="none";
    div6.style.display="none";
}

function disper3(){
    div3.style.display="inline";
    div2.style.display="none";
    div1.style.display="none";
    div4.style.display="none";
    div5.style.display="none";
    div6.style.display="none";
}

function disper4(){
    div4.style.display="inline";
    div2.style.display="none";
    div3.style.display="none";
    div1.style.display="none";
    div5.style.display="none";
    div6.style.display="none";
}

function disper5(){
    div5.style.display="inline";
    div2.style.display="none";
    div3.style.display="none";
    div4.style.display="none";
    div1.style.display="none";
    div6.style.display="none";
}

function disper6(){
    // var div1 = document.getElementById("get1");
    // var div2 = document.getElementById("get2");
    // var div3 = document.getElementById("get3");
    // var div4 = document.getElementById("get4");
    // var div5 = document.getElementById("get5");
    // var div6 = document.getElementById("get6");
    div6.style.display="inline";
    div2.style.display="none";
    div3.style.display="none";
    div4.style.display="none";
    div5.style.display="none";
    div1.style.display="none";
}



3个回答

函数的作用域的问题,公共使用的变量一般是在函数外定义

    div1 = document.getElementById("get1");
    div2 = document.getElementById("get2");
    div3 = document.getElementById("get3");
    div4 = document.getElementById("get4");
    div5 = document.getElementById("get5");
    div6 = document.getElementById("get6");
        从disper1()移除放到所有函数的上面,不然其他函数获取不到
hjs218
Json-Huang 回复qq_41966009: 按上面我提供的方法,先把变量移除到外面,然后把js(即<script type="text/javascript"></script>)放到body标签内容最下面看看。
4 个月之前 回复
qq_41966009
谁都不许动我的砖 依然不可以,我试过所有全局变量的定义方法,没有一个可以的
4 个月之前 回复

写那么复杂干嘛,你那个定义作用域也不对吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.7.2.min.js"></script>

<body>
<style>
    .on{color:red}
    ul li{display:none}
    ul li:first-child{display:block}
</style>
    <div class="test">1</div>
    <div class="test">2</div>
    <div class="test">3</div>
    <div class="test">4</div>
    <div class="test">5</div>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
        <li>测试4</li>
        <li>测试5</li>
    </ul>
    <script>
                $(".test").click(function (){
                $(this).addClass('on').siblings().removeClass('on');
                var index=$(this).index()-1;
                $("ul li").eq(index).show().siblings("li").hide();
            })
    </script>
</body>
qq_41966009
谁都不许动我的砖 万分感谢
4 个月之前 回复
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script type="text/javascript" src="jquery-1.11.0.js" ></script>
<body>
    <style>
        .tored{
            color: red;
        }
        .disshow{
            display: none;
        }
    </style>
<ul>
    <li id="tx">腾讯</li>
    <li id="al">阿里</li>
    <li id="bd">百度</li>
    <li id="wy">网易</li>
    <li id="tc">同程</li>
</ul>
<div>
    <div id="txdesc"  class="disshow">这是腾讯</div>
    <div id="aldesc"  class="disshow">这是阿里</div>
    <div id="bddesc"  class="disshow">这是百度</div>
    <div id="wydesc"  class="disshow">这是网易</div>
    <div id="tcdesc"  class="disshow">这是同程</div>
</div>
         $(function(){
            $("#tx").on("click",function(){
                $("#tx").addClass("tored").siblings().removeClass("tored");
                $("#txdesc").removeClass("disshow").siblings().addClass("disshow");
            });
            $("#al").on("click",function(){
                $("#al").addClass("tored").siblings().removeClass("tored");
                $("#aldesc").removeClass("disshow").siblings().addClass("disshow");
            });
            $("#bd").on("click",function(){
                $("#bd").addClass("tored").siblings().removeClass("tored");
                $("#bddesc").removeClass("disshow").siblings().addClass("disshow");
            });
            $("#wy").on("click",function(){
                $("#wy").addClass("tored").siblings().removeClass("tored");
                $("#wydesc").removeClass("disshow").siblings().addClass("disshow");
            });
            $("#tc").on("click",function(){
                $("#tc").addClass("tored").siblings().removeClass("tored");
                $("#tcdesc").removeClass("disshow").siblings().addClass("disshow");
            });
      })
</script>
</body>
</html>

改下jQuery路劲,需要1.10以上版本的jQuery

qq_41966009
谁都不许动我的砖 万分感谢
4 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!