Question

我使用purecss创建彩色按钮，href不可点击并且正常工作。按钮显示正常，只是导致问题的链接。

<button class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' >Find out more details</button>

我无法点击按钮。为什么这不起作用？

按钮很大，看起来像这样。请问我该如何解决这个问题？

我的按钮CSS是这样的：

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}

    .button-xsmall {
            font-size: 0.5vw;
        }

        .button-small {
            font-size: 1vw%;
        }

        .button-large {
            font-size: 2vw%;
        }

        .button-xlarge {
            font-size: 2.5vw;
        }

  .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

Answer 1

按钮上没有href属性，您可能需要添加onClick =“”事件或使用简单的锚标记

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

    .button-xsmall {
            font-size: 0.5vw;
        }

        .button-small {
            font-size: 1vw%;
        }

        .button-large {
            font-size: 2vw%;
        }

        .button-xlarge {
            font-size: 2.5vw;
        }

  .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

<a class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' >Find out more details</a>

Answer 2

href只是＃＆＃39;，它是HTML中锚标记的空白占位符。最简单的解决方案是将您的按钮包裹在<a>标记中。例如：

<a href="http://www.google.com">
    <button class='my-class'>Find out more details!</button>
</a>

Answer 3

对我而言，这有效：http://jsfiddle.net/ysv75326/1/ 我已完成的所有工作都已将<button>更改为<input type="button"...，并将其ID设为test。然后我设置了一个JavaScript侦听器，用于在点击具有此ID的元素时，它会运行alert("Hey");

代码段：

＆＃13;

$("#test").click(function() {
  alert("Hey");
});

＆＃13;

.pure-button {
  background-color: #1f8dd6;
  color: white;
  padding: 0.5em 2em;
  border-radius: 5px;
}
a.pure-button-primary {
  background: white;
  color: #1f8dd6;
  border-radius: 5px;
  font-size: 120%;
}
.button-xsmall {
  font-size: 0.5vw;
}
.button-small {
  font-size: 1vw%;
}
.button-large {
  font-size: 2vw%;
}
.button-xlarge {
  font-size: 2.5vw;
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
  background: rgb(28, 184, 65);
  /* this is a green */
}
.button-error {
  background: rgb(202, 60, 60);
  /* this is a maroon */
}
.button-warning {
  background: rgb(223, 117, 20);
  /* this is an orange */
}
.button-secondary {
  background: rgb(66, 184, 221);
  /* this is a light blue */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' id="test" value="Find out more details">

＆＃13;

PureCSS按钮href链接无法正常工作

3 个答案: