jquery 常用的tabs效果代码

最新推荐文章于 2021-06-03 16:23:02 发布

独自等待

最新推荐文章于 2021-06-03 16:23:02 发布

阅读量286

点赞数

分类专栏：常用js代码

本文链接：https://blog.csdn.net/qq541182494/article/details/51925109

版权

常用js代码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.引入百度cdn jQuery 库

<script language="javascript" src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>

2. html部分

 <div class="c4">
                <div class="c4t">
                   <ul>
                       <li><a><span style="font-family: Arial, Helvetica, sans-serif;">导航一</span></a>   </li>
                       <li><a><span style="font-family: Arial, Helvetica, sans-serif;">导航二</span></a> </li>
                       <li><a>导航三</a> </li>
                   </ul>
                </div>
                <div class="c4c">
                    <div class="c4cimgs1">
                      <ul>
                          <li><img src="./img/ry2.jpg" /></li>
                          <li><img src="./img/ry2.jpg" /></li>
                          <li><img src="./img/ry2.jpg" /></li> 
                          <li><img src=".0/img/ry2.jpg" /></li> 
                          <li><img src="./img/ry2.jpg" /></li> 
                      </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="c4cimgs1" style="display:none;">
                        <ul>
                            <li><img src="./img/ry2.jpg" /></li>
                            <li><img src="./img/ry2.jpg" /></li>
                            <li><img src="./img/ry2.jpg" /></li>
                            <li><img src="./img/ry2.jpg" /></li>
                            <li><img src="./img/ry2.jpg" /></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="c4cimgs1" style="display:none;">
                        <ul>
                            <li><img src="./img/ry2.jpg" /></li>
                            <li><img src="./img/ry2.jpg" /></li>
                            <li><img src=".0/img/ry2.jpg" /></li>
                            <li><img src="./img/ry2.jpg" /></li>
                            <li><img src="./img/ry2.jpg" /></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>

3.js代码

            <script>
                $(function () {
                    //$(".c1a2 .yydt li").eq(0).show().siblings().hide();
                    $(".c4t ul li").mouseover(function () {
                        var index = $(this).index();
                        $(this).addClass('tabs').siblings().removeClass('tabs');
                        $(".c4c .c4cimgs1").eq(index).show().siblings().hide();
                    })
                })
            </script>