Question

我正在使用此菜单http://www.jqueryscript.net/menu/interactive-menu-css3-jquery.html

当我点击

时出现问题

<a href="1.html">Application 1</a>

它停留在菜单上而不是转到1.html。我发现问题位于此css块

.menu .title{
  position: absolute;
  height: 100%; width: 100%;
  text-align: center;
  font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
  opacity: .2;
}

但无法看到如何解决它

完整来源：

的index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Menu</title>
  <link rel="stylesheet" href="lanceur/style.css">
  <script src="lanceur/jquery-1.7.1.min.js"></script>
  <script src="lanceur/selectivizr.js"></script>
  <!--[if (gte IE 6)&(lte IE 8)]>
    <script src="selectivizr.js"></script>
  <![endif]-->
  <style>
    /* Demo page only */

    #about{
        color: #999;
        text-align: center;
        font: 0.9em Arial, Helvetica;
    }

    #about a{
        color: #777;
    }
  </style>
</head>

<body>

  <ul class="menu">
    <li tabindex="1">
      <span class="title"><a href="1.html">Application 1</a></span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Two</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Three</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Four</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Five</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Six</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Seven</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Eight</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
    <li tabindex="1">
      <span class="title">Nine</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>
  </ul>

  <!-- <script>
    (function(){

    // Append a close trigger for each block
    $('.menu .content').append('<span class="close">x</span>');
    // Show window
    function showContent(elem){
      hideContent();
      elem.find('.content').addClass('expanded');
      elem.addClass('cover');
    }
    // Reset all
    function hideContent(){
      $('.menu .content').removeClass('expanded');
      $('.menu li').removeClass('cover');
    }

    // When a li is clicked, show its content window and position it above all
    $('.menu li').click(function() {
      showContent($(this));
    });
    // When tabbing, show its content window using ENTER key
    $('.menu li').keypress(function(e) {
      if (e.keyCode == 13) {
        showContent($(this));
      }
    });

    // When right upper close element is clicked  - reset all
    $('.menu .close').click(function(e) {
      e.stopPropagation();
      hideContent();
    });
    // Also, when ESC key is pressed - reset all
    $(document).keyup(function(e) {
      if (e.keyCode == 27) {
        hideContent();
      }
    });

    })();
  </script> -->



</body>
</html>

的style.css

    .menu{
      width: 620px;
      margin: 100px auto; padding: 15px;
      list-style: none;
      counter-reset: li;
      background: #eee;
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
      box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }

    .menu:before,
    .menu:after {
      content: "";
      display: table;
    }

    .menu:after {
      clear: both;
    }

    .menu {
      zoom:1;
    }

    /* -------------------------------- */

    .menu li {
      position: relative;
      float: left;
      cursor: pointer;
      height: 120px; width: 200px;
      margin: 10px 0 0 10px;
      color: #fff;
    }

    .menu li:hover, .menu li:focus{
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
      background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
      background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
      background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
      background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
      background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
    }

    .menu .cover{
      z-index: 2;
    }

    .menu .cover:focus{
      outline: 0;
    }

    /* -------------------------------- */

    .menu li::after{
      content: counter(li);
      counter-increment: li;
      font: italic bold 10px serif, georgia;
      position: absolute;
      color: rgba(255,255,255,.1);
      opacity: 0;
      -webkit-transition: all .2s ease-out;
      -moz-transition: all .2s ease-out;
      -ms-transition: all .2s ease-out;
      -o-transition: all .2s ease-out;
      transition: all .2s ease-out;
    }

    .menu li:hover::after, .menu li:focus::after{
      font-size: 100px;
      opacity: 1;
    }

    .menu .cover::after{
      z-index: -1;
    }

    /* -------------------------------- */

    .menu li:nth-child(1),
    .menu li:nth-child(2),
    .menu li:nth-child(3){
      margin-top: 0;
    }

    .menu li:nth-child(1),
    .menu li:nth-child(4),
    .menu li:nth-child(7){
      margin-left: 0;
    }

    /* -------------------------------- */

    .menu li:nth-child(1),
    .menu li:nth-child(1) .content,
    .menu li:nth-child(1) .close{
      background-color: #2c618f;
    }

    .menu li:nth-child(2),
    .menu li:nth-child(2) .content,
    .menu li:nth-child(2) .close{
      background-color: #91ab31;
    }

    .menu li:nth-child(3),
    .menu li:nth-child(3) .content,
    .menu li:nth-child(3) .close{
      background-color: #714a28;
    }

    .menu li:nth-child(4),
    .menu li:nth-child(4) .content,
    .menu li:nth-child(4) .close{
      background-color: #e58600;
    }

    .menu li:nth-child(5),
    .menu li:nth-child(5) .content,
    .menu li:nth-child(5) .close{
      background-color: #c33a00;
    }

    .menu li:nth-child(6),
    .menu li:nth-child(6) .content,
    .menu li:nth-child(6) .close{
      background-color: #7f5dac;
    }

    .menu li:nth-child(7),
    .menu li:nth-child(7) .content,
    .menu li:nth-child(7) .close{
      background-color: #5672b7;
    }

    .menu li:nth-child(8),
    .menu li:nth-child(8) .content,
    .menu li:nth-child(8) .close{
      background-color: #69003f;
    }

    .menu li:nth-child(9),
    .menu li:nth-child(9) .content,
    .menu li:nth-child(9) .close{
      background-color: #393043;
    }

    /* -------------------------------- */

    .menu .content{
      opacity: 0; display: none\9;
      overflow: hidden;
      font: 12px Arial, Helvetica;
      position: absolute;
      height: 120px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
      -webkit-transition: all .3s ease-out;
      -moz-transition: all .3s ease-out;
      -ms-transition: all .3s ease-out;
      -o-transition: all .3s ease-out;
      transition: all .3s ease-out;
    }

    .menu .expanded{
      opacity: .95; display: block\9;
      overflow: visible;
      padding: 40px;
      height: 300px; width: 540px; /* Cover the entire area */
    }

    .menu li:nth-child(3n) .content{ /* 3,6,9 */
      right: 0;
    }

    .menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
      left: 50%;
      margin-left: -310px;
    }

    .menu li:nth-child(7) .content, /* 7,8,9 */
    .menu li:nth-child(8) .content,
    .menu li:nth-child(9) .content{
      bottom: 0;
    }

    .menu li:nth-child(4) .expanded, /* 4,5,6 */
    .menu li:nth-child(5) .expanded,
    .menu li:nth-child(6) .expanded{
      margin-top: -190px;
      top: 50%;
    }

    /* -------------------------------- */

    .menu .title{
      position: absolute;
      height: 100%; width: 100%;
      text-align: center;
      font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
      opacity: .2;
    }

    .menu li:hover .title{
      opacity: .7;
    }

    /* -------------------------------- */

    .menu .close {
      display: none;
      border: 5px solid #fff;
      color: #fff;
      cursor: pointer;
      height: 40px; width: 40px;
      font: bold 20px/40px arial, helvetica;
      position: absolute;
      text-align: center;
      top: -20px; right: -20px;
      -moz-border-radius: 40px;
      -webkit-border-radius: 40px;
      border-radius: 40px;
    }

    .menu .cover .close{
      display: block;
    }

Answer 1

你的div与你的标签重叠，所以当你点击按钮时，你点击div而不是a标签，因此不会触发a标签。

要解决这个问题，您只需要使用a标签包围按钮，而不是在按钮内添加标签。

<a href="1.html"><span class="title">Application 1</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div></a>

见这里：https://jsfiddle.net/960f5bh1/

由于CSS，href链接不起作用

1 个答案: