jquery制作简易tab选项

樱花依旧如初

于 2021-04-24 09:15:48 发布

阅读量221

点赞数 1

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.csdn.net/Daisy_i/article/details/116081859

效果图
在这里插入图片描述

<html>

<head>

<meta charset="utf-8">

<title></title>

CSS代码
<style type="text/css">

   *{

            margin: 0px;padding: 0px;

    }

#main{

    width: 300px;

    height: 350px;

}

img{

       width: 300px;

        height: 300px;

}

#box div{

    display: none;

}

li{

    list-style-type: none;

}

#oul li{

    float: left;

    width: 75px;

    text-align: center;

    height: 50px;

    line-height: 50px;

    overflow: hidden;

}

.a{

    background-color: #5F9EA0;

}

</style>

<script src="../jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

HTML代码
<div id="main">

<ul id="oul">

    <li class="a">汤姆1</li>

    <li>汤姆2</li>

    <li>汤姆3</li>

    <li>汤姆4</li>

</ul>

<div id="box">

    <div style="display: block;"><img src="imges/tm1.jpg" ></div>

    <div><img src="imges/tm2.jpg" ></div>

    <div><img src="imges/tm3.jpg" ></div>

    <div><img src="imges/tm4.jpg" ></div>

</div>

</div>

js代码
<script type="text/javascript">

    $(function(){

        $('li').mouseover(function(){

        $('li').removeClass() //移除类名

        $(this).addClass('a') //给当前元素添加类名

        $('#box > div').hide().eq($(this).index()).show()        //其他兄弟节点隐藏掉 //选择下标显示

    })

})

</script>

</body>

</html>