javascript - 求助，js获取class值，植入id，有的浏览器没效果-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 求助，js获取class值，植入id，有的浏览器没效果

大家讲道理 2017-04-10 15:44:55

[JavaScript讨论组]

693

html代码如下

<p>
    <p class="cate-nav-item first @current" style="width:20%;"><a href="#xxls">零食</a></p>
    <p class="cate-nav-item" style="width:20%;"><a href="#nnyl">饮料</a></p>
    <p class="cate-nav-item" style="width:20%;"><a href="#shbh">百货</a></p>
    <p class="cate-nav-item" style="width:20%;"><a href="#girlzone">女用</a></p>
    <p class="cate-nav-item last" style="width:20%;"><a href="#boyzone">男用</a></p>
</p>

js代码如下

setTimeout(function() {
  $(".xxls").attr('id', 'xxls');
  $(".nnyl").attr('id', 'nnyl');
  $(".shbh").attr('id', 'shbh');
  $(".girlzone").attr('id', 'girlzone');
  $(".boyzone").attr('id', 'boyzone');
}, 2000);

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(3)

PHPz2017-04-10 15:46:55 3楼

我觉得你这样做不太科学。
看你的意思是想到达锚链接的效果，但目标又没有id。
试试这样

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>测试</title>
    <style type="text/css">
        .xxls {
            height: 300px;
            border: 1px solid #ff0000;
        }
        .nnyl {
            height: 350px;
            border: 1px solid #cccccc;
        }
    </style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.cate-nav-item a').click(function(){
                var $this = $(this);
                var href = $this.attr('href');
                var scrollTop = $(href.replace('#', '.')).offset();
                console.log('scrollTop', scrollTop);
                $('body').scrollTop(scrollTop.top);
            });
        });
    </script>
</head>
<body>
    <p>
        <p class="cate-nav-item first @current" style="width:20%;"><a href="#xxls">零食</a></p>
        <p class="cate-nav-item" style="width:20%;"><a href="#nnyl">饮料</a></p>
        <p class="cate-nav-item" style="width:20%;"><a href="#shbh">百货</a></p>
        <p class="cate-nav-item" style="width:20%;"><a href="#girlzone">女用</a></p>
        <p class="cate-nav-item last" style="width:20%;"><a href="#boyzone">男用</a></p>
    </p>
    <p class="panel">
        <ul class="nnyl">
            <li>饮料A</li>
        </ul>
        <ul class="nnyl">
            <li>饮料B</li>
        </ul>
        <ul class="xxls">
            <li>零食A</li>
        </ul>
        <ul class="xxls">
            <li>零食B</li>
        </ul>
        <ul class="xxls">
            <li>零食C</li>
        </ul>
    </p>
</body>
</html>