jquery 让整个页面不可用 jquery实现页面切换

如图要实现不同栏目的切换，点击某个标题就切换对应的栏目块，这里我们利用jQuery来实现

我们的总体的思路是实现板块的隐藏和显示，点击相应的板块，就将对应的板块显示出来，点击另外一个就隐藏，那么这里我们每一个模块都有显示框，如何实现点击时事，就找到对应的时事的模块，是我们需要解决的问题。

比如我们点击时事的时候，通过时事的id来获取到时事对应的模块，那么这里我们可以设置时事的标题和模块的id相同。

那么我们先将大概的框架写出来

具体的HTML和CSS代码如下

<ul>
            <li>时事</li>
            <li>体育</li>
            <li>政治</li>
        </ul>
        <div>时事栏目</div>
        <div>体育栏目</div>
        <div>政治栏目</div>

CSS代码

ul{
    list-style: none;
    margin-bottom: 0;
}
ul li{
    width: 100px;
    height: 50px;
    border: 1px solid gray;
    background-color: lightgray;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 18px;
}
div{
    width: 310px;
    height: 200px;
    border: 1px solid grey;
    text-align: center;
    line-height: 200px;
    margin-left: 40px;
    margin-top: 0px;
    position: relative;
}

下面我们先给每个li一个点击事件，点击不同的栏目主题时相应的li的背景颜色发生变换，

$(function(){
    $("li").click(function(){      
        $(this).css("background-color","aquamarine");
    })
})

由于这里我们需要点击下一个li元素之前需要将所有的li的背景颜色重置为最初的颜色。所以还需要添加如下代码

$(function(){
    $("li").click(function(){
        $("li").css("background-color","lightgray")
        $(this).css("background-color","aquamarine");
    })
})

那么现在我们点击下一个li元素的时候前面的li的背景就已经被重置了

接下来我们的任务就是点击li时显示对应的div

那么怎样找到正确的div呢，这里我们需要通过id来寻找

通过this找到li的id，如果li的id和div的id相等，就替换

id= $(this).attr("id");

这里我们通过attr(“id”);属性来查找对应的li的id，这里的this返回的时点击的li的jQuery对象。

我们同样可以通过控制台来检验一下是否能够获取到正确的id

可以看到我们点击对应的li，返回的对应的li的id

拿到了点击的li元素的id之后我们就可以和div的id进行匹配。

那么如何遍历所有的div呢，这里我们可以通过$(“div”).each(index,val)进行遍历

$("div").each(function(i,val){
            console.log(i);
            console.log(val);
        })

i为div数组的索引值，val为整个div的标签

那么这里我们点击依次li，就返回所有的div的索引值和对应的标签

这里我们有个投机取巧的方式，是把li的id设置为和div的index的下标相同分别对应为0，1，2下面我们在遍历div的时候如果div的数组下标和li的id相同，那么我们就进行相应的div的显示，否则就隐藏，这里我们还要注意将li的第二个元素和最后一个元素$(“li:eq(1)，li:last-child”).hide;进行隐藏。

$("div:eq(1),div:last-child").hide();//默认为隐藏

同时还要注意遍历div的时候，这里的this代表的是当前的div，而点击事件的中的this是当前选中的li，

$("div").each(function(i,val){
//          console.log(i);
//          console.log(val);
         if(id== i){
            $(this).show();
         }else{
            $(this).hide();
         }

        })

同时还要注意利用(“div”).each(function(i,val))each函数里面还有一个function。同时返回的当前的div利用

( “ d i v ” ) . e a c h ( f u n c t i o n ( i , v a l ) ) e a c h 函 数 里 面 还 有 一 个 f u n c t i o n 。 同 时 返 回 的 当 前 的 d i v 利 用 (this)代替

那么现在我们总体的额效果就已经实现了