Home > Developer > JavaScript
Anchor, English
I. Introduction
There are two ways to use the <a> label:
1. Create a link to another document through the href attribute
2. Use the name attribute to create bookmarks in the document
The name attribute specifies the name of the anchor.
1. Positioning by nameThe use of name can only be used on the <a> label, so it is summarized as "a tag + name attribute ".
2. ID locationThe id can be used in any tag.
3. js PositioningUse js to use scroollIntoView to scroll the object to the visible range.
For example, "to top" uses id, "to content" uses the tag + name attribute, and "to bottom" uses js Code.
<! Doctype html> <title> by starof </title> <meta charset = "UTF-8"/> <style type = "text/css">. cls1 ,. cls2 ,. cls3 {width: 500px; height: 600px ;}. cls1 {background-color: red ;}. cls2 {background-color: green ;}. cls3 {background-color: blue ;} </style> <body> <a href = "# top"> to top </a> <br/> <a href = "# content"> to content </> <br/> <a onclick = "javascript: document. getElementById ('where '). scrollIntoView () "style =" cursor: Pointer; "> to bottom </a> <div id =" top "class =" cls1 "> top content </div> <div name =" content "class =" cls2 "> <a name = "content"> content </a> <br/> the name attribute only applies; a & gt; tags are useful. <Br/> you can add name = "content" to the div to delete the internal hyperlink. </Div> <div id = "here" class = "cls3"> bottom content </div> </body> <script type = "text/javascript"> </script>
2. Tab effects implemented by using the anchor
Zhang xinxu has a demo with the code:
<! Doctype html> <title> by starof </title> <meta charset = "UTF-8"/> <style type = "text/css">. box {width: 200px; height: 100px; border: 1px solid # ddd; overflow: hidden ;}. list {width: 200px; height: 100px; line-height: 100px; background-color: # eee; font-size: 80px; text-align: center ;}. link {width: 200px; padding-top: 10px; text-align: right ;}. click {display: inline-block; width: 20px; height: 20px; line-height: 20px; border: 1px solid # ccc; background: # f7f7f7; color: #333; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none ;}. click: hover {background: # eee; color: #345 ;} </style> <body> <div class = "box"> <div class = "list" id = "one"> 1 </div> <div class = "list" id = "two"> 2 </div> <div class = "list" id = "three"> 3 </div> <div class = "list" id = "four "> 4 </div> <div class =" link "> <a class =" click "href =" # one "> 1 </a> <class = "click" href = "# two"> 2 </a> <a class = "click" href = "# three"> 3 </a> <a class = "click" href = "# four"> 4 </a> </div> <script type = "text/javascript"> </script> </body>
The effect is as follows: click here to view
Zhengmei uses the anchor to make the following effect:
The Code is as follows:
<! Doctype html> <title> anchor by starof </title> <meta charset = "UTF-8"/> <style type = "text/css"> dl {/* album */position: relative; width: 160px; height: 142px; border: 10px solid # EFEFDA;/* album border */} dd {/* album content display area, include a photo and the following flip bar */margin: 0;/* remove the default browser settings */padding: 0;/* remove the default browser settings */width: 160px; height: 120px; overflow: hidden;/* focus, so that only one image is displayed at a time */} img {border: 2px solid #000; /* Add stereoscopy */} dt {/* flip bar */position: absolute; right: 0px; bottom: 0px; /* the above three steps are used to fix it under the image */width: 160px; height: 22px; background: # FBFBEA;} a {display: block; /* Let it have the box model */float: right; margin: 2px;/* staggered lattice */width: 18px;/* Square */height: 18px; text-align: center;/* center display */color: # fff;/* The default value is blue, so be sure to rewrite */text-decoration: none; /* remove the underline */background: #666; filter: alpha (opacity = 70); opacity :. 7;} a: hover {background: #000} </style> <body> <dl> <dt> <a href = "# index6"> 6 </a> <a href = "# index5"> 5 </a> <a href = "# index4"> 4 </a> <a href = "# index3"> 3 </a> <a href = "# index2"> 2 </a> <a href = "# index1"> 1 </a> </dt> <dd> </dd> </dl> </body> Effect:
Original
Other references
Http://www.impressivewebs.com/javascript-content-switcher-without-javascript/ http://www.impressivewebs.com/demo-files/content-switcher/#five
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
