给html加上tap鼠标滑过切换样式

效果图

css代码

<style>body,
    html {
        width: 100%;
        height: 100%;
    }

    * {
        margin: 0;
        padding: 0;
    }

    ul,
    li {
        list-style: none;
    }

    a,
    img {
        border: 0;
    }

    hr {
        border-top: medium none;
        margin: 20px 0;
    }

    .active_tab {
        width: 60%;
        margin: 30px auto 20px;
        height: 40px;
        line-height: 40px;
        background: #eee;
    }

    .active_tab a {
        color: #333;
        text-decoration: none;
    }

    .active_tab a:hover {
        color: #f00;
        text-decoration: none;
    }

    .act_title_left {
        float: left;
        width: 100%;
    }

    .act_title_left li {
        float: left;
        width: 100px;
        color: #333;
        border-bottom: 2px solid #ddd;
        text-align: center;
        height: 40px
    }

    .act_active {
        background: #fff;
        border-bottom: none !important;
        border-top: 2px solid #f00;
        color: #f00
    }

    .act_active a {
        color: #f00
    }



    .active_list {
        width: 1000px;
        margin: 0 auto;
    }

    .active_list a {
        text-decoration: none;
    }

    .active_list li {
        margin-left: 180px;
        height: 150px;
    }

    .active_list li img {
        float: left;
        height: 150px;
        margin-left: -180px;
        width: 150px;
    }

    .active_list li h2 {
        font-size: 18px;
        line-height: 2;
        margin-bottom: 0;
        padding: 0;
        font-weight: bold;
        color: #666;
    }

    .active_list li i {
        color: #999;
        display: block;
        font-size: 13px;
        font-style: normal;
        margin-bottom: 5px;
    }

    .active_list li p {
        color: #666;
    }

    .morejia {
        background: #f00 none repeat scroll 0 0;
        border-radius: 15px;
        color: #fff;
        display: block;
        float: right;
        font-size: 12px;
        margin: 20px 0;
        padding: 2px 5px;
    }

    .morejia:hover {
        color: #fff;
    }
    </style>

html部分

<div class="active_tab" id="outer">
        <ul class="act_title_left" id="tab">
            <li class="act_active">
                <a href="#">曼切斯特</a>
            </li>
            <li>
                <a href="#">伦敦</a>
            </li>
            <li>
                <a href="#">爱丁堡</a>
            </li>
            <li>
                <a href="#">格拉斯哥</a>
            </li>
            <li>
                <a href="#">博瀚明</a>
            </li>
            <li>
                <a href="#">布里斯托</a>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
<div id="content" class="active_list">
        <ul style="display:block;width: 112%;margin-left: -55px;">
            <li>
                <a href="#"><img src="img/img-1.jpg" /></a>
                <a href="#">
                    <h2>曼切斯特景点介绍</h2>
                </a>
                <i>2019-12-13</i>
                <p>曼切斯特景点介绍</p>
                <a href="#" class="morejia">more>></a>
            </li>
            <hr>
        </ul>
        <ul style="display:none;width: 112%;margin-left: -55px;">
            <li>
                <a href="#"><img src="img/img-2.jpg" /></a>
                <a href="#">
                    <h2>伦敦</h2>
                </a>
                <i>2019-12-13</i>
                <p>伦敦景点介绍</p>
                <a href="#" class="morejia">more>></a>
            </li>
            <hr>
        </ul>
        <ul style="display:none;width: 112%;margin-left: -55px;">
            <li>
                <a href="#"><img src="img/img-3.jpg" /></a>
                <a href="#">
                    <h2>爱丁堡</h2>
                </a>
                <i>2019-12-13</i>
                <p>爱丁堡景点介绍</p>
                <a href="#" class="morejia">more>></a>
            </li>
            <hr>
        </ul>
        <ul style="display:none;width: 112%;margin-left: -55px;">
            <li>
                <a href="#"><img src="img/img-3.jpg" /></a>
                <a href="#">
                    <h2>格拉斯哥</h2>
                </a>
                <i>2019-12-13</i>
                <p>格拉斯哥景点介绍</p>
                <a href="#" class="morejia">more>></a>
            </li>
            <hr>
        </ul>
        <ul style="display:none;width: 112%;margin-left: -55px;">
            <li>
                <a href="#"><img src="img/img-3.jpg" /></a>
                <a href="#">
                    <h2>博瀚明</h2>
                </a>
                <i>2019-12-13</i>
                <p>博瀚明景点介绍</p>
                <a href="#" class="morejia">more>></a>
            </li>
            <hr>
        </ul>
        <ul style="display:none;width: 112%;margin-left: -55px;">
            <li>
                <a href="#"><img src="img/img-3.jpg" /></a>
                <a href="#">
                    <h2>布里托斯</h2>
                </a>
                <i>2019-12-13</i>
                <p>布里托斯景点介绍</p>
                <a href="#" class="morejia">more>></a>
            </li>
            <hr>
        </ul>
    </div>

js代码

这里需要注意的地方就是得引入jquery

<script>
    $(function() {
        window.onload = function() {
            var $li = $('#tab li');
            var $ul = $('#content ul');

            $li.mouseover(function() {
                var $this = $(this);
                var $t = $this.index();
                $li.removeClass();
                $this.addClass('act_active');
                $ul.css('display', 'none');
                $ul.eq($t).css('display', 'block');
            })
        }
    });
    </script>

 

php

PHP获取字符串所有汉字首字母

2019-12-13 0:02:22

开心一刻

这女朋友我也是无语了

2019-11-24 17:24:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索