錨元素中的href是必需的嗎？
[英]Is href mandatory in anchor element?
問題描述
如果未使用href屬性，則無法顯示<anchor>元素中包含的圖標。 如果我將href初始化為"" ，則會顯示它。 還有，即使我設法通過添加href=""來顯示圖標，也無法通過width和height屬性更改圖標的大小。 我正在嘗試使用jQuery添加href屬性，因為我必須在URL中添加一些參數。
下面是我的代碼：
$(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
如果您沒有超鏈接，則實際上沒有超鏈接，這是“強制性”的。 如果您不希望鏈接導航到任何地方，則約定為href="#" ，在單擊處理程序的末尾帶有e.preventDefault() （需要使用e參數）。 但是沒有href的錨點不是超鏈接，因此也不會是交互式的。
如果您的錨具有名稱屬性，但沒有href屬性，則它是命名錨。 命名錨並不意味着要與之交互，並且已經過時了。 但更重要的是，您似乎完全濫用了name屬性，而沒有試圖將其用於預期目的，因為它的name="tweet my quote" ，這對於該屬性而言是毫無意義的值。
替換錨元素中的href屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.