Question

嗨朋友我有div问题。我点击了我必须显示或隐藏特定div的页面上的链接显示/隐藏潜水。我成功了。但我的问题是，无论何时我点击该链接div都会被隐藏或显示但页面直接在顶部＆amp;我必须再次向下滚动。我不想滚动它，也不想达到顶峰。

请帮我解决这个问题。提前谢谢。

更新：朋友我从我的一个朋友那里得到了答案。其实我在用由于href =“＃”，每次点击该链接时，URL都会被更改，页面会变为顶部。

Answer 1

假设你有一个链接

内联（不推荐，但很可能是你的）

<script>
function showhide(id) {
  var elem = document.getElementById(id);
  elem.style.display=elem.style.display=="none"?"block":"none";
  return false; // MANDATORY
}
</script>

<a href="#" onclick="return showhide('someId')">Toggle</a>
<div id="someId">Show or hide me when you click a link</div>

Answer 2

你想这样做吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

    <div id="wrapper">
        <div id="container">

        </div><!-- end of #container div -->

        <a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a>

    </div><!-- end of #wrapper div -->

</body>
</html>

这是css：

#container {
 width: 300px;
  height: 300px;
   background: red; 
    margin-bottom: 20px;
}

#wrapper {
 margin: 40px auto;
 width: 400px;
}

这是jquery

$(function() {// When document is ready, run this...

//Get hold of the link with the id #showdiv and do something when you click it
$("#showdiv").click(function() {
    // Grab the div with the id #container and show it
    // Alert me when you're done
    $("#container").show(2000, function() {
        alert("I'm done showing");
    });
});

//Get hold of the link with the id #hideDiv and do something when you click it
$("#hideDiv").click(function() {
    // Grab the div with the id #container and hide it
    // Alert me when you're done
    $("#container").hide(2000, function() {
        alert("I'm done hiding");
    });

});

// Toggle - This is like a On/Off Switch
//Get hold of the link with the id #toggle and do something when you click it
$("#toggle").click(function() {
    // Grab the div with the id #container and show if hidden / hide if shown
    $("#container").toggle(2000);
});

});

当然，在使用上面的脚本之前，你必须链接到jQuery的副本。以下是演示的链接：http://jsfiddle.net/tonystark/HhNBA/

Answer 3

您必须取消链接的onclick处理程序的默认行为。为此，请不要在点击处理程序中使用return false，而是使用event.preventDefault()：

HTML：

<a href="#targetdiv" class="foo">hide me</a>
<div id="#targetdiv">blah</div>

使用Javascript：

document.querySelector('a.foo').onclick = function(event) {
    try {
        document.querySelector(this.getAttribute('href')).style.display = 'none';
    } catch (e) {
        console.error("couldn't find element to hide");
    }
    event.preventDefault();
}

JQuery的：

$('a.foo').click(function(event) {
    try {
        $($(this).attr('href')).hide();
    } catch (e) {
        console.error("couldn't find element to hide");
    }
    event.preventDefault();
})

更多信息：

Answer 4

这是因为您的链接指向#foo或仅#，而它不应该有href（或者有空的链接）......

Answer 5

删除href属性并应用文本修饰样式

<a style="text-decoration: underline;" title="click me"></a>

这似乎比应用你不想要的href更有意义，以阻止它以后的正常操作。优雅降级的替代方法是使用href指向显示/隐藏的div，默认情况下正常显示并使用javascript将其隐藏在javascript可用的位置。

“将你的锚点（链接）更改为一个范围，以便它没有这种行为。然后，使用css设置样式，使它看起来像你想要的样子。”

我经常使用那种技术。即，使用带有onclick的span或div，使用text-decoration进行样式设置：underline，cursor：pointer并可能显示：如果你决定div，则为inline。一个警告是，在IE6中，css悬停不会对除锚之外的任何东西起作用。这很容易用javascript修复。

您可以完全删除href属性。锚具有上述优点（跨浏览器：悬停样式），并允许工具提示的标题属性等。

Answer 6

你可能有一个#in href属性，如href=#请删除哈希而不是写href='javascript:void(null);'

HTML Div显示/隐藏问题

6 个答案: