我无法显示 <anchor> 中包含的图标元素，如果 href它没有使用属性。如果我初始化 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>最佳答案
它是“强制性”的，因为如果它没有 href，那么您就没有真正的超链接。如果您不希望链接导航到任何地方，约定是 href="#"，在您的点击处理程序末尾有一个 e.preventDefault() (这需要一个 e 参数)。但是没有 href 的 anchor 不是超链接，因此不会具有交互性。
如果您的 anchor 具有名称属性但没有 href 属性，那么它就是命名 anchor 。命名 anchor 并不意味着与之交互，并且早已过时。但更重要的是，您似乎完全滥用了 name 属性，并且没有尝试将其用于预期目的，因为它是 name="tweet my quote"，这是该属性的无意义值.
关于javascript - anchor 元素中的 href 是强制性的吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48247172/