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

outerA innerA

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

outerA innerA

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!

outerA innerA Copy after login 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!

列表内容 拨打电话 Copy after login 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:

outerA innerA Copy after login 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 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:

outerA Copy after login 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!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to solve a tag nesting