<a> tag

Question

        <a href="<?php echo $url_werkwijze['url']; ?>" modal="modal_werkwijze_1" id="werkwijze_1" class="one-half first proces">
        <div class="title">
            <?php echo 'het proces'; ?>
        </div>
        <div class="proceslijn">
            <img class="line" src="<?php echo $background_iconen['url']; ?>"/>
            <?php
            if( have_rows('icons') ){
                $k = 1;
                // loop through the rows of data
                while ( have_rows('icons') ) {
                the_row();
                $icon_afbeelding = get_sub_field('icon');   
                $icon_title = get_sub_field('title');
                $url_icon = get_sub_field('url_icon');  
                ?>
                <a href="<?php echo $url_icon['url']; ?>" class="icons" id="icon_<?php echo $k++; ?>">

                    <img src="<?php echo $icon_afbeelding['url']; ?>"/>

                    <span><?php echo $icon_title; ?></span>
                </a>    

                <?php
                }
            }
            ?>
         </div>

    </a>

But somehow it generates this code in de browser:

<a href="https://somewebsite.nl/werkwijze-stappen/#het-proces" modal="modal_werkwijze_1" id="werkwijze_1" class="one-half first proces" style="width: 50%;">
        <div class="title" style="top: 30vh;">
            het proces          </div>
        </a>
<div class="proceslijn"><a href="https://somewebsite.nl/werkwijze-stappen/#het-proces" modal="modal_werkwijze_1" id="werkwijze_1" class="one-half first proces" style="width: 50%;">
            <img class="line" src="https://somewebsite.nl/wp-content/uploads/2018/05/lijn_proces.png">
                                </a><a href="https://somewebsite.nl/werkwijze-stappen/#luisteren" class="icons" id="icon_1">

                    <img src="https://somewebsite.nl/wp-content/uploads/2018/05/luisteren.png">

                    <span>...Luisteren</span>
                </a>    

                                    <a href="https://somewebsite.nl/werkwijze-stappen/#denken" class="icons" id="icon_2">

                    <img src="https://somewebsite.nl/wp-content/uploads/2018/05/denken.png">

                    <span>...Denken</span>
                </a>    

                                    <a href="https://somewebsite.nl/werkwijze-stappen/#doen" class="icons" id="icon_3">

                    <img src="https://somewebsite.nl/wp-content/uploads/2018/05/doen.png">

                    <span>...Doen</span>
                </a>    

        </div>

The strange thing is that it's generating an a tag after the div class="title".

It's getting even stranger because when i replace the parent a tag in to a div. The generated code is as expected. Anyone any solutions?

Answer 1

发生这种奇怪的行为是因为您在代码中嵌套了锚，这是不允许的（您可以找到说明in this post）

以不同的方式重组html代码，以避免嵌套锚。