使用javascript显示/隐藏div而不刷新页面

我有一个脚本，显示/隐藏页面上的多个独立div。问题是，当你点击显示一个div时，无论页面上的哪个位置，它都会自动关注第一个div。有没有办法专注于显示的div？使用javascript显示/隐藏div而不刷新页面

这里是JavaScript：

function toggleOptions(e) { 
     var ele = e; 
     var text = e.parentElement.querySelector('.toggleOptions') 

    if(text.style.display == "none") { 
     //ele.style.display = "none"; 
     text.style.display = "block"; 
     text.innerHTML = "TESTING"; 
     ele.innerHTML = "hide"; 
    } 
    else { 
     text.style.display = "none"; 
     //text.innerHTML = "Hide GPS"; 
     ele.innerHTML = "show"; 
    } 

    return false; 
    }

下面是HTML：

<div> 
    <a href="#" onclick="toggleOptions(this);" style="display:block;"> 
     show 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 1 OPTIONS 
    </div> 
</div> 
<div> 
    <a href="#" onclick="toggleOptions(this);" style="display:block;"> 
     show 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 2 OPTIONS 
    </div> 
</div> 
<div> 
    <a href="#" onclick="toggleOptions(this);" style="display:block;"> 
     show 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 3 OPTIONS 
    </div> 
</div>

这里是工作http://jsfiddle.net/YE6XZ/1/

来源

2013-03-13 Die 20

这必须是浏览器特定的。使用Firefox时，重点是点击'div'。 – 2013-03-13 20:05:49

的jfiddle给你的表演环节的一类，如：

<a class="show" href="#" onclick="toggleOptions(this);" style="display:block;">show</a>

然后添加到您的jQuery：

$('a.show').click(function(e){ 
    e.preventDefault(); 
});

一个书签锚（href="#"）的默认操作是跳转到页面顶部。这会阻止这一点。 jsFiddle example

的替代，jQuery的少的方法是改变你的onclicks到：

onclick="return toggleOptions(this);"

因为你已经返回false。 jsFiddle example

来源

2013-03-13 20:00:46 j08691

如果你没有注意到，他的例子中没有jQuery，甚至没有包含在jsfiddle中。 – 2013-03-13 20:03:26

@ NickMitchinson - 是的，我当然注意到了。然而，问题是用它来标记的。 – j08691 2013-03-13 20:04:16

@NickMitchinson是真的，但是OP用'jQuery'标记标记了他的问题，因此j08691被允许提出我想的jQuery答案。 – 2013-03-13 20:05:02

我相信你也可以使用.focus()方法专注于给定的元素。在您的例子：在HREF无效（0）：

function toggleOptions(e) { 
    var ele = e; 
    var text = e.parentElement.querySelector('.toggleOptions') 

    if(text.style.display == "none") { 
     //ele.style.display = "none"; 
     text.style.display = "block"; 
     text.innerHTML = "TESTING"; 
     text.focus(); //This should give focus to the newly shown text element 
     ele.innerHTML = "hide"; 
    } 
    else { 
     text.style.display = "none"; 
     //text.innerHTML = "Hide GPS"; 
     ele.innerHTML = "show"; 
    } 

    return false; 
}

除非我误解你在找什么做....

来源

2013-03-13 20:09:08

使用JavaScript。使用javascript函数显示或隐藏使用ID

<a href="javascript:void(0)">Show</a>

来源

2017-02-07 09:50:41

使用javascript显示/隐藏div而不刷新页面

回答

相关问题