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>

如果href为空，则隐藏链接，然后显示不同的按钮？

3 个答案: