Javascript 链接<；a>；当条件未满足时，标记下载默认HTML页面

我面临一个奇怪的问题。我有一个链接标签下载喜欢

     <div class="col-md-4 about-right">
         <ul>
        <h5>Get My Cv</h5>
        <li><span class="glyphicon glyphicon-user"><input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF</li>
        <li><span class="glyphicon glyphicon-user"><input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
        <li><span class="glyphicon glyphicon-user"><input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
        <center>
        <a href="#" id="cvLink"  download onclick="getCv()">
         <button type="button" class="btn btn-info">Download</button></a> 
        </center>
       </ul> 
       </div> 

您应该在getCv函数的末尾添加一个“return false；”语句。 这将阻止a执行。

您应该在getCv函数的末尾添加一条“return false；”语句。

---

这将阻止a执行。

仅让

getCv

函数返回false是不够的。您需要将return false写入onclick本身，或者将

getCv

函数调用的结果内联返回到onclick本身：

<a href="#" id="cvLink"  download onclick="return getCv();">

---

仅让

getCv

函数返回false是不够的。您需要将return false写入onclick本身，或者将

getCv

函数调用的结果内联返回到onclick本身：

<a href="#" id="cvLink"  download onclick="return getCv();">

---

首先，在回答您的问题之前，我想花点时间指出您的HTML的一些问题：

<div class="col-md-4 about-right">
  <ul>
    <h5>Get My Cv</h5>
    <li><span class="glyphicon glyphicon-user">
      <input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF
    </li>
    <li><span class="glyphicon glyphicon-user">
      <input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
    <li><span class="glyphicon glyphicon-user">
    <input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
    <center>
      <a href="#" id="cvLink" download onclick="getCv()">
        <button type="button" class="btn btn-info">Download</button>
      </a>
    </center>
  </ul>
</div>

功能高亮要求（e）{
让我们看看这个，
required=document.querySelectorAll（clicked.dataset.required）；
如果（e.type==='mouseenter'）{
如果（单击。下载）{
此.removeEventListener（'mouseenter'，highlightRequirements）；
此项。删除EventListener（“鼠标移动”，高亮显示要求）；
required.forEach（req=>req.parentNode.classList.remove（'highlight'）；
}否则{
required.forEach（req=>req.parentNode.classList.add（'highlight'）；
}
}否则{
required.forEach（req=>req.parentNode.classList.remove（'highlight'）；
}
}
功能链接激活（e）{
让link=document.querySelector（this.dataset.link）；
link.download=true；
link.href=this.dataset.downloadfrom；
link.classList.add（'allowed'）；
}
让radios=document.querySelectorAll（'input[name=optradio]'），
radioArray=阵列。从（收音机），
link=document.querySelector（'#cvLink'）；
射频阵列(
radio=>radio.addEventListener（'change'，linkActivate）
);
link.addEventListener（'mouseenter'，高亮要求）；
link.addEventListener（'mouseleave'，高亮要求）
@关键帧高亮显示{
0% {
背景色：透明；
}
75% {
背景色：柠檬黄；
}
100% {
背景色：透明；
}
}
ul+a{
显示：内联块；
文本对齐：居中；
文字装饰：无；
保证金：0.5em自动；
}
ul+a{
颜色：#66c；
光标：无下降；
边框：2个实心#66c；
填充：0.2em 0.4em；
边界半径：0.5em；
不透明度：0.5；
}
允许ul+a{
不透明度：1；
光标：指针；
}
李斯潘{
动画：3s亮点；
}



下载PDF格式

下载Word文档


以HTML格式下载


首先，在回答您的问题之前，我想花点时间指出您的HTML的一些问题：

<div class="col-md-4 about-right">
  <ul>
    <h5>Get My Cv</h5>
    <li><span class="glyphicon glyphicon-user">
      <input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF
    </li>
    <li><span class="glyphicon glyphicon-user">
      <input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
    <li><span class="glyphicon glyphicon-user">
    <input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
    <center>
      <a href="#" id="cvLink" download onclick="getCv()">
        <button type="button" class="btn btn-info">Download</button>
      </a>
    </center>
  </ul>
</div>


功能高亮要求（e）{
让我们看看这个，
required=document.querySelectorAll（clicked.dataset.required）；
如果（e.type==='mouseenter'）{
如果（单击。下载）{
此.removeEventListener（'mouseenter'，highlightRequirements）；
此项。删除EventListener（“鼠标移动”，高亮显示要求）；
required.forEach（req=>req.parentNode.classList.remove（'highlight'）；
}否则{
required.forEach（req=>req.parentNode.classList.add（'highlight'）；
}
}否则{
required.forEach（req=>req.parentNode.classList.remove（'highlight'）；
}
}
功能链接激活（e）{
让link=document.querySelector（this.dataset.link）；
link.download=true；
link.href=this.dataset.downloadfrom；
link.classList.add（'allowed'）；
}
让radios=document.querySelectorAll（'input[name=optradio]'），
radioArray=阵列。从（收音机），
link=document.querySelector（'#cvLink'）；
射频阵列(
radio=>radio.addEventListener（'change'，linkActivate）
);
link.addEventListener（'mouseenter'，高亮要求）；
link.addEventListener（'mouseleave'，高亮要求）
@关键帧高亮显示{
0% {
背景色：透明；
}
75% {
背景色：柠檬黄；
}
100% {
背景色：透明；
}
}
ul+a{
显示：内联块；
文本对齐：居中；
文字装饰：无；
保证金：0.5em自动；
}
ul+a{
颜色：#66c；
光标：无下降；
边框：2个实心#66c；
填充：0.2em 0.4em；
边界半径：0.5em；
不透明度：0.5；
}
允许ul+a{
不透明度：1；
光标：指针；
}
李斯潘{
动画：3s亮点；
}



下载PDF格式

下载Word文档


以HTML格式下载


如果else{}语句返回false怎么办？这有帮助吗？不，我试过了，但不起作用。仍然下载默认页面。这些单选按钮是互斥的。这意味着只有一个按钮可以被选中，而不是所有三个按钮都被选中？是的，一次只能选中。当然，你也可以只添加一个不可见的，让if语句单击它，让可见的真的什么都不做（即删除donwload属性）。或者如果执行document.getElementById（'cvLink'）。removeAttribute（'download'），会发生什么？如果您的else{}语句返回false？这有帮助吗？不，我试过了，但不起作用。仍然下载默认页面这些单选按钮是互斥的。这意味着只有一个按钮可以被选中，而不是所有三个按钮都被选中？是的，只能一次选中。当然，你也可以只添加一个不可见的，让if语句点击它，然后让visible真的什么都不做（即删除donwload属性）。或者如果您执行document.getElementById（'cvLink'）。removeAttribute（'download'）会发生什么？那里有一个
返回false
。格式有问题，但确实存在。
返回
// a named function to highlight the <input> elements required
// in order to enable the <a> element:
function highlightRequirements(e) {

  // caching the element that initiated the events
  // here the <a> element:
  let clicked = this,

      // retrieving the elements that are required to
      // be chosen amongst before the <a> can be used:
      required = document.querySelectorAll(

        // I store, in the <a> element the attribute:
        // data-required="input[name=optradio]"
        // here we use the HTMLElement.dataset interface
        // to retrieve that selector, which is passed as
        // the argument to document.querySelectorAll:
        clicked.dataset.required
      );

  // if the event type (the event, 'e', is passed automatically
  // from the EventTarget.addEventListener() method) is the
  // 'mouseenter' event:
  if (e.type === 'mouseenter') {

    // if the <a> element has the download attribute set:
    if (clicked.download) {

      // we remove the event-listener bound to that element
      // for both 'mouseenter' and 'mouseleave' events:
      this.removeEventListener('mouseenter', highlightRequirements);
      this.removeEventListener('mouseleave', highlightRequirements);

      // and we iterate over the required elements, using
      // Array.prototype.forEach(), and an Arrow function
      // expression, to remove the 'highlight' class from
      // the parentNode of each required ('req') element:
      required.forEach(req => req.parentNode.classList.remove('highlight'));
    } else {

      // if the <a> element does not have the download property,
      // we iterate over the required elements and add the
      // 'highlight' class-name, in order to trigger the animation
      // defined in the CSS, in order to draw the users' attention:
      required.forEach(req => req.parentNode.classList.add('highlight'));
    }

  // otherwise, if the event was not the 'mouseenter' event (and so
  // must be the 'mouseleave' event):
  } else {

    // we iterate over the required elements, and remove the 'highlight'
    // class-name from their parentNodes:
    required.forEach(req => req.parentNode.classList.remove('highlight'));
  }
}

// a named function, fired by the radio inputs, to
// 'enable' or 'activate' the <a> element:
function linkActivate(e) {

  // we use document.querySelector to retrieve the first
  // - if any - element matching the supplied selector:
  var link = document.querySelector(

    // similarly to above, I stored the selector for the
    // relevant <a> element in the 'data-link' attribute,
    // and retrieve that attribute-value using the
    // HTMLElement.dataset interface:
    this.dataset.link
  );

  // setting the download attribute to 'true':
  link.download = true;

  // retrieving the 'data-downloadfrom'
  // attribute-value from the changed
  // radio input:
  link.href = this.dataset.downloadfrom;

  // adding the 'allowed' class to the
  // <a> element, to show that interaction
  // is now possible:
  link.classList.add('allowed');
}

// selecting all the <input> elements with name="optradio":
let radios = document.querySelectorAll('input[name=optradio]'),

    // converting that NodeList into an Array, using
    // Array.from():
    radioArray = Array.from(radios),

  // retrieving the <a> element using
  link = document.querySelector('#cvLink');

// iterating over the Array of radio-inputs using
// Array.prototype.forEach() and an Arrow function:
radioArray.forEach(

  // here we bind the linkActivate() function as the
  // event-handler for the 'change' event:
  radio => radio.addEventListener('change', linkActivate)
);

// here we bind the highlightRequirements() function as
// the event-handler for the 'mouseenter' and 'mouseleave'
// events for the <a> element:
link.addEventListener('mouseenter', highlightRequirements);
link.addEventListener('mouseleave', highlightRequirements);