Question

我想使用span标记创建样式化按钮，这些标记或多或少类似于<button>标记。快速单击按钮不应选择其元素内部或外部的任何文本，或者根本不能选择文本，还应该有一个指针光标。

在jQuery中为<span>事件分配一个普通的.click()标记可以正常运行，但不会像正确的按钮那样。我不知道如何完成此操作，除了使用<a>标记，使用#或javascript:链接作为href属性。但这几乎违背了不引人注目的JavaScript的目的。此外，锚链接已经加下划线的文本和需要覆盖的颜色。

总而言之，我如何才能完成不显眼的范围按钮？不依赖于锚点或实际的按钮输入标记。感谢。

Answer 1

更新

您可以使用这些样式来阻止选择：

-webkit-user-select:none;
-moz-user-select:none;

See Demo Here

请注意以上内容仅适用于webkit和Mozilla浏览器。

据我所知，jQuery最简单易用。你可以这样做：

$(function(){
    $('#span_id').click(function(){
      // your code here...
    });
});

请注意，<span>标记为内嵌元素，您需要将其设置为块级并display:block才能应用width和height它，使它看起来像一个按钮。

话虽如此，我想知道为什么你不能/不使用按钮而使你的代码在语义上有效。

Answer 2

这可能是一个疯狂的想法，但您可以使用按钮作为按钮。它们的风格可以像其他一切一样。

Answer 3

'span按钮'

<span class="spanbutton" title="Span Button!" onclick="spanButtonFunction()">Span Button!</span>

造型：

.spanbutton {
    color:#000000;
    border:1px solid #000000;
    padding-left:8;
    padding-right:8px;
    border-radius:3px;
    cursor:pointer;
    font-family: arial;
    font-size:small;

    /*prevent selection*/
    -webkit-user-select:none;
    -moz-user-select:none;

    /* fallback */
    background-color:#EEEEEE;

    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCCCCC),     to(#F4F4F4));

    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* IE 10 */
    background: -ms-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #F4F4F4, #CCCCCC);
}

当然还有关于按钮功能的脚本。

此外，当你想点击按钮'mid-click'的外观时点击按钮，jQuery将有所帮助：

$(document).ready(function (){
    $(".spanbutton").bind("mousedown", function(e){
            buttondown(this);
    });
    $(".spanbutton").bind("mouseup", function(e){
            buttonup(this);
    });
    $(".spanbutton").bind("mouseout", function(e){
            buttonup(this);
    });
});

function buttondown(button) {
    button.className = "downbutton";
}

function buttonup(button) {
    button.className = "spanbutton";
}

还有一些“向下”按钮的样式：

.downbutton {
    color:#000000;
    border:1px solid #333333;
    padding-left:8px;
    padding-right:8px;
    border-radius:3px;
    cursor:pointer;
    font-family: arial;
    font-size:small;

    /*prevent selection*/
    -webkit-user-select:none;
    -moz-user-select:none;

    background-color:#BBBBBB;
}

投票，如果你喜欢它！这将激励我做更多这样的详细回复

不引人注目但又可用的跨度按钮？

3 个答案:

更新

See Demo Here