not working on the other pages

Question

Here's the first page that the a href='' code is working .

moneypro.online/website-design

<div class="row animate-box fadeInUp animated-fast">
            <!-- Tabs -->
        <div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
            <div class="col-md-6">
                <div class="gtco-video gtco-bg gtco-image img-responsive" style="background-image: url(/WebsiteDesign.png); background-size: contain; ">
                </div>
            </div>
            <div class="col-md-6">
               <h2>Website Design</h2>
                        <p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
                        <div class="row">
                            <div class="col-md-12">
                                <h4>✔ Responsive</h4>
                            </div>
                            <div class="col-md-12">
                                <h4>✔ User oriented</h4>
                            </div>

                            <div class="col-md-12">
                                <h4>✔ Search engine ready</h4>
                            </div>
                        </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="/contact"><button type="button" class="btn btn-success btn-block">Appointment</button></a>
                    </div>
                    <div class="col-md-4">
                        <a href="#"><button type="button" class="btn btn-info btn-block">Inquiry</button></a>
                    </div>
                    <div class="col-md-4">
                        <a href="/pricing"><button type="button" class="btn btn-warning btn-block">Pricing</button></a>
                    </div>
                </div>
            </div>
        </div>

    </div>

and here is the other page that the a href='' code does not work.

moneypro.online/services

 <div class="gtco-tab-content-wrap" style="height: 643px;" data-section="services">
                <div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="gtco-video gtco-bg img-responsive" style="background-image: url(assets/public/images/icons/WebsiteDesign.png); background-size: contain; ">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel">
                                    <div class="panel panel-heading panel-cust-bg">
                                        <h2 class="cust-txt"><strong>Website Design</strong></h2>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <h4>✔ Responsive</h4>
                                            </div>
                                            <div class="col-md-12">
                                                <h4>✔ User oriented</h4>
                                            </div>

                                            <div class="col-md-12">
                                                <h4>✔ Search engine ready</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>                                
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <a href="/contact" class="btn btn-success btn-block" role="button" >Appointment</a>
                            </div>
                            <div class="col-md-4">
                                <a href="#" class="btn btn-info btn-block" role="button">Inquiry</a>
                            </div>
                            <div class="col-md-4">
                                <a href="/pricing" class="btn btn-warning btn-block" role="button">Pricing</a>
                            </div>
                        </div>
                    </div>
                </div>

they're are exactly the same and i don't know why the other page is working . here's the live website of it live example

Can someone please explain it to me.

So what you mean to say is that the `/contact` link works in the `moneypro.online/website-design` but not in `moneypro.online/services` ? — Isac, Aug 07 '17 at 00:36
and when i right click the button appointment and open it in a new window tab it redirecting to my contact — , Aug 07 '17 at 00:38
I think [this answer](https://stackoverflow.com/a/22902498/1270789) explains the issue a little; here is [the official docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role), so it would seem you need an explicit `onclick="handleBtnClick(event)"`, otherwise it just becomes an on/off toggle. Or just stick with the `` in your first example. — Ken Y-N, Aug 07 '17 at 00:42

score 2 · Answer 1 · edited Aug 07 '17 at 00:45

2

Ok, here is the difference between the two:

Working:

<a href="/contact">
    <button type="button" class="btn btn-success btn-block">
        Appointment
    </button>
</a>

Not Working:

<a href="/contact" class="btn btn-success btn-block" role="button">
    Appointment
</a>

You are adding class btn to "a" tag, and it thinks the tag is a button so it ignores href attribute.

edited Aug 07 '17 at 00:45

Ken Y-N

14,644
21
71
114

answered Aug 07 '17 at 00:43

Mindless

2,352
3
27
51

i tried the working one on the both pages but still the other page doesn't work . i guess this is a problem on a javascript conflict? – Aug 07 '17 at 00:47
hmm, that's weird. I see both page has the same javascript conflict – Mindless Aug 07 '17 at 00:47
i guess i'll just try a javascript onclick . but im too sad about it cause its not clean right? – Aug 07 '17 at 00:50
Yes you are right, that shouldn't be used in this case, try remove the class from a tag as well – Mindless Aug 07 '17 at 00:51
what do you mean remove the tag? – Aug 07 '17 at 00:53
sorry i meant class attribute from a tag – Mindless Aug 07 '17 at 01:55
I think there's something blocking the click action. – Mindless Aug 07 '17 at 02:22
yup actually there is . so i just did it like this `````` and on javascript ```function linkPageContact(){ window.location.href = "/contact"; }``` i can't think of something actually why there's a js that blocking the href – Aug 07 '17 at 02:25

tim1234 · Answer 2 · 2017-08-07T00:50:56.767

0

Every href element needs a corresponding anchor which should be a name or id attribute and it must match/exist in the page. This example by w3schools show a good practice of href.

edited Aug 07 '17 at 00:50

answered Aug 07 '17 at 00:38

tim1234

196
2
12

You didn't even try to inspect the example page did you? Your answer is not valid to this question – Mindless Aug 07 '17 at 00:39
@Mindless From the source code provided, I am not able to see the correct anchor used/ correct usage of `href`. So, I assume the reason why it works in `moneypro.online/website-design` is due to some server side codes not shown by @Paul Kevin Macandili – tim1234 Aug 07 '17 at 00:47

not working on the other pages

2 Answers2