如果 href 为空，则隐藏链接，然后显示其他按钮

Question

我的每个列表项中都有一个链接和div。如果链接有一个 href，那么我想确保div 隐藏在其列表项中，并且链接看起来很正常。

但是，如果链接没有 href（例如 href="），那么我想将类 .show 添加到div 中，以便我可以显示它。我也想同时隐藏链接。

或者有更好的方法可以做到这一点吗？谢谢

<style>
  .nolinkdiv { display:none; }
  .show { display:block!important; }
</style>
<ul>
  <li>
     <a href="/register.html">Register</a>
     <div class="nolinkdiv">Register Coming Soon</div>
  </li>
  <li>
     <a href="">Register</a>
     <div class="nolinkdiv">Register Coming Soon</div>
  </li>
</ul>

Answer 1

你不需要 JavaScript 来实现这一点：

.nolinkdiv { display:none; }
ul li a[href=""] {
  display: none;
}
ul li a[href=""] + div {
  display: block;
}

Answer 2

这实际上是仅通过CSS隐藏的正确方法：

ul li a {
    display: none;
}
ul li a[href^="https:"],
ul li a[href^="http:"] {
    display: block; //This can be anything else rather than block, such as grid etc.
}

Answer 3

$( document ).ready(function() {
    $('ul li').each(function(idx, li) {
        var LI = $(this);
        var hrefValue = LI.find("a").attr('href');
        if(hrefValue) {
            LI.find("div").hide()
        } else {
            LI.find("a").hide()
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
     <a href="/register.html">Register</a>
     <div class="">Register Coming Soon</div>
  </li>
  <li>
     <a href="">Register</a>
     <div class="">Register Coming Soon</div>
  </li>
</ul>