Изменить внутреннюю ссылку href только для более узких экранов - PullRequest
Новая
       9

Изменить внутреннюю ссылку href только для более узких экранов

0 голосов
/ 30 августа 2018

У меня есть «обзорная» html-страница с множеством изображений товара - каждое изображение ссылается на страницу, на которой может быть 3 или 4 товара, например, src = "gadgets-1.html"

На рабочем столе, на странице назначения пользователь может видеть большинство продуктов или при необходимости легко прокрутить вниз.

Но на узком экране, где css MQ преобразует все столбцы в ширину 100%, последние элементы не обязательно видны, и пользователь должен интуитивно понять, что необходимо пролистать страницу вниз, поэтому я хочу, чтобы изображение ссылки связывалось напрямую на соответствующий пункт на странице назначения.

Я установил якорные ссылки, которые хорошо работают, например, src = "gadgets-1.html # red-thing", но я не хочу, чтобы "# red-thing" был активным на более широких экранах.

Чтобы возобновить, я хочу, чтобы ссылка была gadgets-1.html на более широком экране и gadgets-1.html # красная вещь на узком экране.

Я не понимаю, как это можно (или нужно) сделать с помощью css. Нужно ли использовать js или php? Если да, то как?

Ответы [ 3 ]

0 голосов
/ 30 августа 2018

Поскольку вы не хотите повторять элементы привязки (как в других потоках), вы не сможете сделать это с помощью 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");
}

Вы можете использовать цикл для повторения одного и того же процесса для всех якорей с использованием правильных селекторов.

0 голосов
/ 30 августа 2018

Гибким решением будет использование Javascript с определенным атрибутом данных для хранения различных имен якорей.

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 ready и изменить размер окна, jQuery будет полезен.
Отметьте CodePen здесь 

$(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
});
0 голосов
/ 30 августа 2018

Есть пара решений, которые я могу придумать из головы. Я обычно не люблю использовать 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;
    }        
}
...