Question

你能告诉我我做错了什么吗？我想在点击链接时更改CSS属性。

在此发现此建议，但对我不起作用。

HTML

<a href="#" onclick="$('.action').css('display', 'block');">Edit</a>
<div class="action action_2">
   <ul>
      <li><a href="#">bearbeiten</a></li>
      <li><a href="#">löschen</a></li>
   </ul>
</div>

CSS：

.button .action {
    position: absolute;
    padding:15px;
    display: none;
    background: #fff;
}

Answer 1

如果你正在使用jQuery，试试这个。

<script>
$(document).ready(function() {
    $('#link').click(function(e) {
        e.preventDefault();
        $('.action').css('display', 'block');
    });
});
</script>

并在您的HTML中。

<a href="#" id="link">Edit</a>

Answer 2

您的问题是您提供onclick函数调用而不是函数引用。您的浏览器需要后者。

正确的方式

// Javascript
function foo(e) {
    // do stuff, like set the CSS on some elements.  Note 
    // that the 'e' argument is going to be a browser event, 
    // not the element you're changing.
}

// HTML
<div onclick=foo>
// This passes a reference to a function.  Your browser then
// calls foo with an argument of the browser event that was triggered.

错误的方式

// Javascript
function bar(element) {
    // do stuff on the *element* argument.
}

// HTML
<div onclick=bar(someDiv)>
// This is wrong because *bar(someDiv)* isn't a reference to 
// the function, it's a call to run the function with an argument 
// of *someDiv*.  onclick isn't expecting this, so the behavior 
// you'll get will be not what you expect.

您的使用细节是$('.action').css('display', 'block');是函数调用，而不是引用。您的浏览器正在尝试执行($('.action').css('display', 'block'))(clickEvent)，这根本不对。因此，您可以将$('.action').css('display', 'block');包装在匿名函数中，使其按照浏览器的预期方式运行：

<div onclick="function(e) {$('.action').css('display', 'block');}">

另请注意$().show()，这可能是您使用的便捷功能，而不是手动设置CSS属性。还考虑在HTML元素中添加ID，然后使用JQuery附加该ID的onclick处理程序（即$().click()）。

Answer 3

我会删除内联JS并尝试这样的事情：

$('a').click(function() {
    $('.action').css('display', 'block');
});

使用$('.action').show();也可以实现同样的效果。

以下是一个例子：

http://jsfiddle.net/pqHeM/1/

Answer 4

将操作移至JS文件：

$(document).ready(function() {
    $('a').on('click', function(e) {
        e.preventDefault();
        $('.action').css({'display':'block'});
    });
});

使用onclick =“”更改CSS

4 个答案:

正确的方式

错误的方式