How to solve a tag nesting

We know that in the actual web page layout, sometimes it is necessary to click a part of the button in the middle of the entire click area, then the A tag is nested in the A tag

cbbb83600c965e56899813f0a975e3ac6f4f7058e7805f3bde7858b4ff993cebouterA 0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed

But we will find that for this kind of nesting, the browser will directly parse it incorrectly, and the parsing result is as follows:

86a51f7e9b217848a75d5514959dfb2f
6f4f7058e7805f3bde7858b4ff993cebouterA5db79b134e9f6b82c0b36e0489ee08ed
0c0476d8ba20599bf8cf6983ea9d2d7dinnerA5db79b134e9f6b82c0b36e0489ee08ed

So for this situation How to solve it?

Option 1: Use the object tag for nesting

For example, if we write as follows, there will be no error in parsing!

<a href="#haorooms">
    outerA    <object><a href="#haoroomsinner">innerA</a></object></a>

The most typical application of this writing method is that the entire list needs to be clicked, and there are phone numbers in the list that need to be clicked individually to dial!

<a class="haorooms_list" href="跳转页面">
    列表内容    <object><a href="tel:694434565">拨打电话</a></object></a>

Option 2: Use positioning method

This method is a last resort. The idea is that we don’t need to nest. The direct code is written as follows:

<a href="#haorooms">outerA</a><a href="#haoroomsinner">innerA</a>

The outer haorooms are placed at the position of the inner a tag by setting display:inline-block and absolute positioning . Then adjust the z-index size of the inner a label and the outer a so that the mouse can correctly select the a label;

The core idea of ​​this method is to simulate our implementation through positioning The effect you want to achieve!

Option 3: Use HTML's 03fc64e1e502d5ba947b3a9af06d2d2adab9f699790ab0922e596ecb9f6677d5 tag to achieve

Remember that when making the school webpage, you used dreamweaver, you can use dreamweaver Picture hot zone to achieve the click effect of the picture. That's right, we can use hot zones to achieve the nesting effect of a tags!

The area tag has not been used for a long time. Let’s popularize the basic knowledge:

area can specify shape and coords.

If the shape property is set to "rect", this value specifies the coordinates of the upper left and lower right corners of the rectangle. (x1,y1,x2,y2)

If the shape attribute is set to "circ", this value specifies the coordinates and radius of the center of the circle. (x,y,radius)

If the shape attribute is set to "poly", this value specifies the value of each vertex of the polygon. If the first and last coordinates do not match, then in order to close the polygon, the browser must add the last pair of coordinates. (x1,y1,x2,y2,..,xn,yn)

area and map should be used together. You can specify some hot areas on the picture or specify the hot areas in the list.

If we use area and map to specify the hot area inside the a tag in the list, we can achieve an effect similar to the nesting of the a tag above!

Still the above example, we can write as follows:

 <a href="#haorooms">
        outerA          <map>
            <area shape="rect" coords="0,0,200,21" href="haoroomsinner" >
        </map>
    </a>

Option 4: Use span and other tags plus js events to replace the a tag

Of course we can also use span, Tags, etc. replace the a tag, but you have to write more js jump code to achieve the effect that the a tag can achieve through js!

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to convert CSS encoding

How to use CSS3 to make lights Illumination display text animation

How to create the loading special effect of CSS3

The above is the detailed content of How to solve a tag nesting. For more information, please follow other related articles on the PHP Chinese website!