Сделайте ссылку / кнопку на 100% кликабельной - PullRequest
Новая
       8

Сделайте ссылку / кнопку на 100% кликабельной

0 голосов
/ 18 февраля 2019

Надеясь, кто-то может помочь.Я создал кнопку в mailchimp с кодом ниже, чтобы позволить мне использовать кнопку в текстовом поле.Это выглядит великолепно, моя единственная проблема в том, что текст в кнопке кликабелен, но я хочу, чтобы вся кнопка была кликабельной.Я добавил 'display: inline-block', как указано здесь, но, похоже, не оказывает влияния

Может кто-нибудь предложить какой-нибудь совет?

Спасибо 

<center>
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#F287B7;" width="60%">
    <tbody>
        <tr>
            <td style="color: rgb(255, 255, 255); font-family: verdana, Arial, sans-serif; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; line-height: 150%; padding: 15px 30px; width: 100%; text-align: center;"><a href="https://www.littlebird.co.uk/membership/join?utm_source=toucan&amp;utm_medium=referral&amp;utm_campaign=toucan15" style="color:#FFFFFF; text-decoration:none;" target="_blank; display: inline-block">Learn More</a></td>
        </tr>
    </tbody>
</table>
</center>

1 Ответ

0 голосов
/ 18 февраля 2019

вы можете использовать jQuery.Просто присвойте своему <td> элементу идентификатор или класс.Затем с помощью jQuery создайте событие «click». 

<script>
    $(() => {
        $("#clickable").on("click", function () {
            window.open("https://www.littlebird.co.uk/membership/join?utm_source=toucan&amp;utm_medium=referral&amp;utm_campaign=toucan15");
        });
    });
</script>
<center>
    <table border="0" cellpadding="0" cellspacing="0" style="background-color:#F287B7;" width="60%">
        <tbody>
            <tr>
                <td id="clickable"
                    style="cursor: pointer; color: rgb(255, 255, 255); font-family: verdana, Arial, sans-serif; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; line-height: 150%; padding: 15px 30px; width: 100%; text-align: center;">
                    <a href="https://www.littlebird.co.uk/membership/join?utm_source=toucan&amp;utm_medium=referral&amp;utm_campaign=toucan15"
                        style="color:#FFFFFF; text-decoration:none;" target="_blank; display: inline-block">Learn
                        More</a></td>
            </tr>
        </tbody>
    </table>
</center>

Вы должны импортировать библиотеку jQuery.Посмотрите, что я добавил style="cursor: pointer; в td, чтобы изменить курсор.

...