Question

我有一个带有大量产品图片的“概述” html页面-每个图片都链接到可能包含3或4个产品的页面，例如src =“ gadgets-1.html”

在桌面上，用户可以在目标页面上看到大多数产品，或者在需要时可以轻松向下滚动。

但是在狭窄的屏幕上，其中css MQ将所有列都转换为100％的宽度，最后一个项目不一定在视图中，并且用户必须直觉有必要向下滑动页面，因此我希望链接图像直接链接转到目标页面上的相关项目。

我已经建立了很好的锚链接，例如src =“ gadgets-1.html＃red-thing”，但我不希望'＃red-thing'在更宽的屏幕上有效。

要恢复，我希望链接在更宽的屏幕上显示为gadgets-1.html， gadgets-1.html＃red-thing在窄屏上。

我不知道如何使用CSS做到这一点。应该使用js还是php？如果可以，怎么办？

Answer 1

我可以想到很多解决方案。我通常不喜欢使用JavaScript根据屏幕宽度修改DOM，但是如果您愿意的话，这是可以接受的解决方案。

或者您可以执行以下简单操作：

<div class="links">
    <a class="mobileLink" href="gadgets-1.html#red-thing">gadgets-1</a>
    <a class="desktopLink" href="gadgets-1.html">gadgets-1</a>
</div>

使用一些CSS可以根据屏幕宽度隐藏正确的链接

.mobileLink{
    display: none;
}
@media screen and (max-width: 992px) {
    .mobileLink{
        display: inline-block;
    }
    .desktopLink{
        display: none;
    }        
}

Answer 2

由于您不想重复锚元素（根据其他线程），因此无法使用CSS进行操作，因此必须使用js。

if(window.innerwidth < 911){
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_small_screen_devices);
}else{
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_normal_desktop_and_bigger_devices");
}

您可以使用循环使用适当的选择器为所有锚重复相同的过程。

Answer 3

一种灵活的解决方案是将Javascript与特定的data-属性一起使用，以存储不同的锚点名称。

HTML：

<a class="targetLink" href="/link1" data-anchor="anchor-name1">Target link</a>
<a class="targetLink" href="/link2" data-anchor="anchor-name2">Target link</a>

要在DOM准备就绪和窗口调整大小的情况下执行跨浏览器的代码，jQuery将很有用。
选中CodePen here

$(document).ready(function() {
    var $target = $(".targetLink");
    var $window = $(window);
    var breakpoint = 640;
    var linkSmall = false;

    function checkWidth() {
        if ($window.width() <= breakpoint) {
            // appends anchors to links
            if(!linkSmall){
                $target.each(function(index) {
                   var href2 = $(this).attr("href") + "#" + $(this).attr("data-anchor");
                   $(this).attr("href", href2 );
                });
                linkSmall = true;
            }
        }else{
            // removes anchors to links
            if(linkSmall){
                $target.each(function(index) {
                   var href1 = $(this).attr("href");
                   var a = href1.indexOf('#');
                   var href2 = href1.substring(0, a != -1 ? a : href1.length);
                   $(this).attr("href", href2 );
                });
                linkSmall = false;
            }
        }
    }
    checkWidth(); // on document ready
    $(window).resize(checkWidth); // on window resize
});

修改内部href链接仅适用于较窄的屏幕

3 个答案: