Question

如果<anchor>属性未被使用，我无法显示href元素中包含的图标。如果我将href初始化为""，则会显示。另外，即使我设法通过添加href=""来显示图标，我也无法使用width和height属性更改图标的大小。我正在尝试使用jQuery添加href属性，因为我必须在URL中添加一些参数。

以下是我的代码：

＆＃13;

$(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));
  });
 
});

＆＃13;

.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%;
}

＆＃13;

<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&amp;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>

＆＃13;

Answer 1

如果它没有href，你就没有真正的超链接，这是“强制性的”。如果您不希望链接在任何地方导航，则约定为href="#"，在您的点击处理程序末尾有e.preventDefault()（需要e参数）。但是没有href的锚不是超链接，因此不会是交互式的。

如果您的锚具有name属性但不具有href属性，那么它是一个命名锚。命名锚点不打算与之交互，并且很久就过时了。但更重要的是，您似乎完全滥用了name属性而没有尝试将其用于预期目的，因为它是name="tweet my quote"，这是属性的无意义值。

锚元素中是否强制href？

1 个答案: