2021-06-01

最新推荐文章于 2024-08-03 22:21:30 发布

海_小鱼

最新推荐文章于 2024-08-03 22:21:30 发布

阅读量83

点赞数

文章标签： html css3 jquery javascript

本文链接：https://blog.csdn.net/weixin_48387957/article/details/117444130

版权

js点击导航字体变大变色，有下划线（短下划线）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://r.img.cctvpic.com/photoAlbum/templet/js/jquery-1.7.2.min.js"></script>
    <style>
        @media screen and (min-device-width: 300px) and (max-device-width: 765px) {
            /* 全局 CSS 定义 */
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed,
            figure, figcaption, footer, header, hgroup,
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            box-sizing: border-box;
            outline: none;
            }
            /* HTML5 display-role reset for older browsers */
            article, aside, details, figcaption, figure,
            footer, header, hgroup, menu, nav, section {
            display: block;
            }
            body {
            line-height: 1;
            /* min-width: 1280px; */
            }
            ol, ul {
            list-style: none;
            }
            blockquote, q {
            quotes: none;
            }
            blockquote:before, blockquote:after,
            q:before, q:after {
            content: '';
            content: none;
            }
            table {
            border-collapse: collapse;
            border-spacing: 0;
            }
            .clearfix:after, .clearfix:before{
            content: "";
            display: table;
            }
            .clearfix:after{
            clear: both;
            }
            .clearfix{
            *zoom: 1;
            }
            input {
                height: 52px;
                border-radius: 5px;
                border: 1px solid #EEEEEE;
            }
            input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
            -webkit-box-shadow: 0 0 0px 1000px #fff inset;
            }
            button {
                background: #2F7DE2;
                border-radius: 5px;
                color: white;
                border: none;
                cursor: pointer;
            }
            body,
            html {
                width: 100%;
            }
        .top2 {
                width: 3.75rem;
                height: 0.6rem;
                background: #222222;
            }
            .top2 ul {
                display: flex;
                height: 0.6rem;
                font-size: 0.15rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 0.6rem;
                margin: 0 0.15rem 0rem 0.15rem;
                overflow-x: auto;
                white-space: nowrap;
                justify-content: flex-start;
            }
            ::-webkit-scrollbar {
                display: none;
            }
            .top2 ul li:first-child {
                margin-left: 0;
            }
            .top2 ul li {
                height: 0.6rem;
                font-size: 0.15rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 0.6rem;
                margin-left: 0.24rem;
            }
            .cur {
                color: #1053A8 !important;
                font-size: 0.18rem !important;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600 !important;
            }
            .curs {
                color: #1053A8 !important;
                font-size: 0.18rem !important;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600 !important;
                border-bottom: 3px solid #1053A8;
                width: 0.15rem;
                border-radius: 3px;
                position: absolute;
                bottom: 7px;
                left: 50%;
                transform: translate(-50%, 0);
            }
            .swiper-containerTo {
                overflow: scroll;
            }
            .swiper-wrapperTo li {
                cursor: pointer;
                position: relative;
            }
        }
    </style>
</head>
<body>
    <div class="top2">
             <ul class="swiper-wrapperTo">
               <li class="cur" class="swiper-wrapperTo" onclick="window.location.href='../../national-theater-index/XXX.html'">首页<p class="curs"></p></li>
               <li class="swiper-wrapperTo">演出实况<p></p></li>
               <li class="swiper-wrapperTo">精彩瞬间<p></p></li>
               <li class="swiper-wrapperTo">纪录片<p></p></li>
               <li class="swiper-wrapperTo">数字录音<p></p></li>
               <li class="swiper-wrapperTo">有声节目<p></p></li>
               <li class="swiper-wrapperTo">资讯<p></p></li>
               <li class="swiper-wrapperTo">直播<p></p></li>
             </ul>
    </div>
</div>
</body>
<script>
    // 移动端适配
    let isShowH5Page =false
    var isIphoe = /AppleWebKit.*mobile/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))
    if(isIphoe && document.documentElement.clientWidth < 768) {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75  + 'px';
        isShowH5Page = true
    }
    // 点击导航变大变色有下划线
    $(".top2 li").click(function(){
        $(this).addClass("cur").siblings().removeClass("cur");
        $(this)[0].children[0].classList.add('curs');
        $(this).siblings().children().removeClass('curs')
    });
</script>
</html>

海_小鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-01

js点击导航字体变大变色，有下划线（短下划线）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫