Is href mandatory in anchor element?
Question
I am not able to display the icon enclosed in <anchor> element, if the href attribute isn't used in it. It is displayed if I initialize href to "" . ANd also, Even if I manage to display the icon by adding href="" , I am not able to change the size of the icon with width and height attribute. I am trying to add the href attribute using jQuery as I'll have to add some parameters to the URL.
Below is my code:
$(document).ready(function() { var content=""; var quoteContent=""; var quoteAuthor=""; $("#click").click(function() { $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) { content=key[0].content + "<p>— " + key[0].title + "</p>"; quoteContent=key[0].content; quoteAuthor=key[0].title; $("#quote-form").html(content); console.log(content); }); $("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"}); $("#tweet-prop").attr('href','https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text='+encodeURIComponent('"'+quoteContent+'"'+'-'+quoteAuthor)); }); });
.position-message{ margin-left: 25%; margin-right:25%; margin-top:5%; } div.background{ background-color: rgba(245,245,245,0.1); border-radius:10%; padding-bottom: 2%; } .button-prop{ /*transformation : translateX(-50%); */ display: inline-block; position: relative; padding-left : 50%; /*-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); */ } .quote-shape{ border-radius: 10%; } #page{ margin-left: 5%; margin-right: 5%; margin-top:2%; margin-bottom:2%; width: 1200px; height: 450px; max-height: 450px; } #page-background{ background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg); text-align: center; } #share { height:30px; width: 80px; } .space-from-quote{ padding-top: 2%; }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <Title>Click to get quotes</Title> </head> <body id="page-background"> <div class="well background" id="page"> <div id="quote" class="position-message"> <span><p id="quote-form"></p></span> </div> <!--<div class="row" id="button-shape"> <div id="share" class="col"> <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank"> <i class="fa fa-facebook-official"></i> Share </a> </div>--> </div> <div class="buttons"> <a class="button" id="tweet-prop" name="tweet my quote"><i class="fa fa-twitter"></i></a> <button type="button" id="click" class="btn btn-outline-secondary btn-circle button-prop" ><i class="fa fa-refresh fa-2x"></i> </button> </body> </html>
1 answers
solution1
1 ACCPTED 2018-01-14 06:30:41
It's "mandatory" in the sense that you don't really have a hyperlink if it doesn't have an href. If you don't want the link to navigate anywhere, the convention is href="#" , with an e.preventDefault() at the end of your click handler (which needs an e parameter). But an anchor without an href isn't a hyperlink, and so isn't going to be interactive.
If your anchor has a name attribute but not an href attribute, then it's a named anchor. Named anchors aren't meant to be interacted with, and are long obsolete. But more importantly, you seem to be misusing the name attribute completely and not trying to use it for its intended purpose, given that it's name="tweet my quote" , which is a nonsensical value for the attribute.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.