гиперссылка не работает в мобильном ответе css - PullRequest
1 голос
/ 21 февраля 2020

У меня есть несколько ссылок на фоновое изображение. Эти гиперссылки работают нормально, но в мобильном представлении ничего не происходит, когда я нажимаю эти гиперссылки. Ниже приведен код гиперссылки. Вы также можете сослаться на сайт http://coachx.in и увидеть, что ссылка «Опубликовать проект» не работает в мобильном телефоне.

 <section id="home" class="offset">
            <div class="fullwidthbanner-container revolution">
                <div class="fullwidthbanner">
                    <ul>
                        <li data-transition="fade">
                            <img src="Images/Land.jpg" class="defaultimg" alt="" />
                            <div class="caption sfl bold bg text-center" data-x="center" data-y="180" data-speed="500" data-start="500" data-easing="easeOutExpo" style="margin-top: 0px; background-color: transparent; white-space: pre !important; text-transform: none !important; overflow-wrap: break-word !important;">Get any IT & BPO Project delivered by Trusted Firms</div>
                            <div class="caption sfb icon bg" data-x="280" data-y="260" data-speed="500" data-start="800" data-easing="easeOutExpo"><span>#Free-Consultations</span></div>
                            <div class="caption sfb icon bg" data-x="490" data-y="260" data-speed="500" data-start="1000" data-easing="easeOutExpo"><span>#Cost-Savings</span></div>
                            <div class="caption sfb icon bg" data-x="650" data-y="260" data-speed="500" data-start="1200" data-easing="easeOutExpo"><span>#Payment-Security</span></div>
                            <div class="caption sfb icon" data-x="340" data-y="360" data-speed="500" data-start="1600" data-easing="easeOutExpo">
                               <a href="Customer/Post_Project.aspx" class="btn3" style="border-radius: 5px; z-index: 1000001 !important; position: relative;">Post a Project</a>
                            </div>
                            <div class="caption sfb icon" data-x="640" data-y="360" data-speed="500" data-start="1800" data-easing="easeOutExpo"><a href="Customer/Post_Talent.aspx" class="btn3" style="border-radius: 5px; z-index: 1000001 !important; position: relative;">Hire a Developer</a></div>

                            <%--<div style="width: 50%; float: right; margin-top: 150px; text-align: center;">
                                
                            </div>--%>

                        </li>
                    </ul>
                    <div class="tp-bannertimer tp-bottom"></div>
                </div>
                <!-- /.fullscreen-banner -->
            </div>
            <!-- /.fullscreen-container -->
        </section>

Может кто-нибудь, пожалуйста, руководство. Как сделать эти гиперссылки кликабельными.

1 Ответ

2 голосов
/ 21 февраля 2020

Не уверен, что именно является настоящей ошибкой, но, судя по следующим фактам:

  1. Я пробовал режим устройства в Chrome, и он работал, но он не работает на моем фактическом iPhone 6 Plus. ,
  2. Похоже, JavaScript предупреждение не связано с этой проблемой.
  3. Для ссылки есть разметка (если вы удерживаете кнопку нажатой, когда ползунок открыт на iPhone, то внизу появляется меню iOS, где отображается URL-адрес с вопросом, хотите ли вы откройте его в новой вкладке).

Похоже, что-то блокирует событие при прикосновении. Это ОЧЕНЬ грязный метод исправления, но он должен сделать свое дело:

<script type="text/javascript">

jQuery(document).ready(function($) {
  $("#buynwa").on("touchstart", function(event) {
      window.location.href = $(event.target).attr('href');
    });
 });

</script>

Попробуйте вставить это непосредственно перед тегом </body> в файле нижнего колонтитула. php, под любые другие сценарии. Он будет искать событие touchstart для самого первого тега привязки на первом слайде, захватить атрибут href и затем перейти на эту страницу. Если это работает, часть кода $("#buynwa") необходимо будет адаптировать к другим id других тегов привязки, поскольку между ними нет общего общего класса. Вы должны проверить элемент и изменить селектор jQuery на $("#buynwa, #id2, #id3").

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...