Question

我需要一点帮助，请原谅我的新手编程。

我有这段代码javascript

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
}

这就是我在html上继承它的方式

<a href="#" onclick="toggle_visibility('something');"><center>Show something</center></a>

<div id="something" style="display:none;">
<p>something</p>
</div>

它的作用是当有人点击“显示某些内容”时，div中的文字将会显示出来。我有两个问题，希望你能指导我。

网站上的放置位置不在开头，点击href="#"时，观看者会在网站开头向上滚动。

请注意，我只需要一次文字点击。不是按钮。

第二个和可选的是：我可以做任何事情来在下面的代码上添加jQuery，以便它在点击显示时有一点点动画吗？

Answer 1

＆LT;中心]，[已被弃用，这意味着使用它已不再明智。最好调整CSS文件中的位置。还建议不要在元素上使用样式=“”等内联样式，也应该将它们放在CSS文件中。不建议使用onclick事件，而是添加事件监听器。

这是一个关于如何实现这些目标的简单Javascript版本的JSFiddle：https://jsfiddle.net/u8zc6yfo/2/

window.onload = function () {
var clickableItems = document.getElementsByClassName("clickable");
for (var i = 0; i < clickableItems.length; i++) {
    clickableItems[i].addEventListener("click", function () {
        toggle_visibility(this.id);
    });
}

}

function toggle_visibility(id) {
    var getToggleItem = document.getElementById(id).getAttribute("data-toggle");
    var e = document.getElementById(getToggleItem);
    (e.style.display != "block") ? e.style.display = "block" :    e.style.display = "none";
}

和HTML：

<div class="wrapper">
<span id="toggleshowsomething" data-toggle="something" class="clickable center">Show something</span>

<div id="something">
    <p>something</p>
</div>

和CSS：

.wrapper {
width: 300px;
margin:0px auto;
}
.clickable {
color: blue;
cursor: pointer;
}
.clickable:hover {
color: purple;
}
#something {
display: none;
}
}

这一点，完全是，任何分配了“clickable”类的项目都会添加一个事件监听器。单击该项目时，由于您希望它切换不同的元素，您可以将其存储在数据切换中：“whateverIdYouWantToPointTo” - 然后，通过三元语句：（布尔检查）？真假 ; 确定是否隐藏了数据切换中列出的id的项目。我这样做是因为如果没有设置显示属性，您的代码将不会考虑。

(e.style.display != "block") ?  //says to check if display is not shown as block
//this is what to do if it returns true
e.style.display = "block";
//show element
:
//this is what to do if it returns false
e.style.display = "none";
//hide element
}

然后为了完整起见，我做了一个可以找到的JQuery模型：https://jsfiddle.net/o6wozosu/

    window.onload = function() {
    $(".clickable").on("click", function() {
    var useId = $(this).attr("data-toggle");

    $("#" + useId).fadeToggle();
    });
    }

这是一回事。您可以使用fadeToggle（）方法执行动画输入和输出，.toggle（）;只是突然改变显示。还有.animate（{}），它采用不同的css变量，并允许通过JQuery进行流畅的动画。您可以在此处阅读相关文档：http://api.jquery.com/animate/

Answer 2

虽然不满意，但您可以将锚标记更改为以下内容，以避免锚链接显示在页面顶部：

<a href="javascript:;" onclick="toggle_visibility('something');"><center>Show something</center></a>

理想情况是，如果您实际上没有链接某些东西，请不要使用锚标记。

Answer 3

而不是“＃”使用javascript：void（0）

<a href="javascript:void(0)" onclick="toggle_visibility('something');"><center>Show something</center></a>

更多信息here：

Answer 4

嗯，你可以通过多种方式解决这个问题。由于您使用的是Javascript，您可以更改要显示的文本的容器的不透明度，或者（如果您有jQuery）可以显示（）并隐藏（）您想要显示的内容。

使用jQuery的示例：

function show_hide() {
var tracker = 1;
    $('.div_name').click(function() {
        if (tracker == 1) {
            $('.div_name a').show();
            tracker = 2;
        }
        else if (tracker == 2) {
            $('.div_name a').hide();
            tracker = 1;
        }
    });
}

确保调用show_hide（）;在document.ready

Answer 5

既然你想要使用jQuery，我建议如下：

JS：

$(function(){ //execute this when dom is ready
    $("#toggle").click(function(e){ // like 'onclick', this function is called then the element with the id 'toggle' is clicked
        $("#something").fadeToggle(300); // toggle visibility with a 300ms fade animation
        e.preventDefault(); //prevent the default click action, in this case scrolling to top 
    });
});

HTML：

<a href="#" id="toggle"><center>Show something</center></a>
<div id="something" style="display:none;">
<p>something</p>
</div>

不要忘记在HTML中包含jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

在文本 - 单击显示（功能）

5 个答案: