Recently, when I was working on a project, I encountered the following problem: one page has multiple texts and only one Div. When I click a text, the DIV is displayed below the text, and alignment to the left of the corresponding text, and consider the case of resolution failure.
Considering different browsers, jquery and JS are used first.CodeAs follows:
FunctionShowdiv (OBJ ){VaRObjoffset =$ (OBJ). offset (); $ ("# Testdiv"). Each (Function(){This. Style. Left =Objoffset. Left;This. Style. Top = objoffset. Top + $ (OBJ). Height () + 5;}); $ ("# Testdiv"). Show ();}
The HTML code is as follows:
<Input type = "text" onclick = "showdiv (this)"/> <input type = "text" onclick = "showdiv (this) "/> <Div id =" testdiv "style =" width: 100px; Height: 100px; position: absolute; Background-color: red; display: none "> </div>
In the above Code, the position of testdiv must be position.
Running Effect