锚元素中的href是必需的吗？
[英]Is href mandatory in anchor element?
问题描述
I am not able to display the icon enclosed in <anchor> element, if the href attribute isn't used in it. 
如果未使用href属性，则无法显示<anchor>元素中包含的图标。 It is displayed if I initialize href to "" . 如果我将href初始化为"" ，则会显示它。 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. 还有，即使我设法通过添加href=""来显示图标，也无法通过width和height属性更改图标的大小。 I am trying to add the href attribute using jQuery as I'll have to add some parameters to the URL. 我正在尝试使用jQuery添加href属性，因为我必须在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 个解决方案
解决方案1
1 已采纳 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). 如果您不希望链接导航到任何地方，则约定为href="#" ，在单击处理程序的末尾带有e.preventDefault() （需要使用e参数）。 But an anchor without an href isn't a hyperlink, and so isn't going to be interactive. 但是没有href的锚点不是超链接，因此也不会是交互式的。
If your anchor has a name attribute but not an href attribute, then it's a named anchor. 如果您的锚具有名称属性，但没有href属性，则它是命名锚。 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. 但更重要的是，您似乎完全滥用了name属性，而没有试图将其用于预期目的，因为它的name="tweet my quote" ，这对于该属性而言是毫无意义的值。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.