JS在定位锚点时隐藏了一个div

debugcn 发表于 Dev

大斋火王

class="profile"默认情况下，我有多个divs（）被隐藏。每个div仅在有针对性时显示。我希望class="employeeul"将其中一个配置文件div作为目标时隐藏所有div 。我没有使用CSS进行此操作，有人知道为什么吗？JS解决方案也很好。（我认为我不能使用诸如onclick之类的东西，因为当从其他站点访问锚点时，div必须隐藏。）

这是我的代码（我删除了divs内容）：

<div class="narrow_content">
        <div class="profile" id="m_empfang0"></div>
        <div class="profile" id="m_empfang1"></div>
        <div class="profile" id="m_mitarbeiter0"></div>
        <div class="profile" id="m_mitarbeiter1"></div>
        <div class="profile" id="m_mitarbeiter2"></div>
        <div class="profile" id="m_mitarbeiter3"></div>
        <div class="profile" id="m_mieter0"></div>
        <div class="profile" id="m_mieter1"></div>
        <div class="profile" id="m_mieter2"></div>
    <div class="employeeul">
        <ul> <!-- Empfang -->
            <li class="employee"></li>
            <li class="employee"></li>
        </ul>
    </div>
    <div class="employeeul">
        <ul> <!-- Mitarbeiter -->
            <li class="employee"></li>
            <li class="employee"></li>
            <li class="employee"></li>
            <li class="employee"></li>
        </ul>
    </div>
    <div class="employeeul">
        <ul> <!-- Mieter -->
            <li class="employee"></li>
            <li class="employee"></li>
            <li class="employee"></li>
        </ul>
    </div>
</div>

凯西

似乎您只需要在页面具有特定URL时动态显示/隐藏项目的语法。在这种情况下，这是一个简单的JS解决方案：

//get an array of elements with the class we're interested in working with
var employeeuls = document.getElementsByClassName("employeeul");

//get the current url
var url = window.location.href;

//if the current url is equal to example.php#profile, hide some elements
if(url == "example.php#profile")
{
    //iterate over the array and apply the style to hide the elements
    for(i=0; i < employeeuls.length; i++)
    {
    employeeuls[i].style.display = "none";
    }
}

//otherwise, the elements should be hidden
else
{
    //iterate over the array and apply the style to hide the elements
    for(i=0; i < employeeuls.length; i++)
    {
    employeeuls[i].style.display = "block";
    }
}

注意：“块”是无序列表的默认显示属性。

我了解您不是在使用jQuery，但将来会向所有查看此帖子的人包括jQuery等效项：

//variable assigned to all elements with class "employeeul"
var employeeuls = $(".employeeul");

//get the current url
var url = $(location).attr("href");

//apply the style change 
if(url == example.php#profile)
{
employeeuls.hide();
}

else employeeuls.show();

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。