如何在特定浏览器宽度下更改 a 标签答案

【问题标题】：How to change an a tag at a certain browser width如何在特定浏览器宽度下更改 a 标签
【发布时间】：2020-04-11 08:16:03
【问题描述】：

我有这段代码可以创建一个下拉登录框：

<li id="login-link"><a href="javascript:;" onclick="$('#login-link').toggleClass('open');">SIGN IN</a>

但是，当调用移动宽度媒体查询时，这会被附加到汉堡菜单中，这并不理想。我的问题是 - 有没有办法重构这个，将这个下拉登录框更改为移动宽度上的一个简单的 a 标记 (<a href="signin"></a>)？

谢谢！

【问题讨论】：

使用 jquery 你可以删除它和/或在别处克隆（）它。

标签： javascript jquery html css hyperlink

【解决方案1】：

我会复制<li id="login-link">...</li> 元素并创建一个类来根据媒体查询显示/隐藏它们。可能是这样的：

@media only screen and (max-width: 599px) {
  .mobile-only {
    display: inherit;
  }
  .desktop-only {
    display: none;
  }
}

@media only screen and (min-width: 600px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: inherit;
  }
}

<li id="login-link mobile-only"><a href="javascript:;" onclick="$('#login-link').toggleClass('open');">SIGN IN (MOBILE)</a>

<li id="login-link desktop-only"><a href="signin">SIGN IN (DESKTOP)</a>

我也会考虑将Bootstrap 用于类似的事情。

【讨论】：

【解决方案2】：

也许会有所帮助。在同一页面上，将打开一个视图：

                                    <div class="media-left pr-1">
                                        <span class="avatar avatar-md"><img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-7.png" alt="Generic placeholder image"></span>
                                    </div>
                                    <div class="media-body w-100">
                                        <h6 class="list-group-item-heading">Wayne Burton</h6>
                                        <p class="list-group-item-text">to me <span>Today</span>
                                            <span class="float-right">
                                                <i class="la la-reply mr-1"></i>
                                                <i class="la la-arrow-right mr-1"></i>
                                                <i class="la la-ellipsis-v"></i>
                                            </span>
                                        </p>
                                    </div>

                                </a>
                            </div>
                            <div id="collapse21" role="tabpanel" aria-labelledby="headingCollapse2" class="card-collapse collapse" aria-expanded="false" style="">
                                <div class="card-content">
                                    <div class="email-app-text card-body">
                                        <div class="email-app-message">
                                            <p>Hi John,</p>
                                            <p>Thanks for your feedback ! Here's a new layout for a new Modern Admin theme.</p>
                                            <p>We will start the new application development soon once this will be completed, I will provide you more
                                                details after this Saturday. Hope that will be fine for you.</p>
                                            <p>Hope your like it, or feel free to comment, feedback or rebound !</p>
                                            <p>Cheers~</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

【讨论】：