Javascript 在div中定位标记_Javascript_Html_Css_Frontend

Javascript 在div中定位标记

javascript html css

Javascript 在div中定位标记,javascript,html,css,frontend,Javascript,Html,Css,Frontend,如何将标签定位在div中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con

如何将标签定位在div中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <script>
        function display(){
            var x = document.getElementById("hello");
            var y = x.getElementsByTagName("ul").getElementsByTagName("li").getElementsByTagName("a"); 
            if (x.style.display == "none"){
                x.style.display = "block";
            } else{
                x.style.display = "none";
            }
        }
    </script>
    <button onclick="display()">Press</button>
    <div class="test" id="hello">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </div>
</body>
</html>


文件
函数显示（）{
var x=document.getElementById（“hello”）；
变量y=x.getElementsByTagName（“ul”）.getElementsByTagName（“li”）.getElementsByTagName（“a”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}
按

这只是给了我一个错误

ncaught TypeError:x.getElementsByTagName（…）。getElementsByTagName不是函数显示时（test.html:14）在HTMLButtonElement.onclick（test.html:22）

更改此项：

function display(){
    var x = document.getElementById("hello");
    var y = x.getElementsByTagName("ul").getElementsByTagName("li").getElementsByTagName("a"); 
    if (x.style.display == "none") {
        x.style.display = "block";
    } else{
        x.style.display = "none";
    }
}

为此：

function display(){
    const testDiv = document.getElementById("hello");
    const anchors = testDiv.querySelectorAll(':scope > ul > li > a');
    for( const a of anchors ) {
        a.style.display = ( a.style.display == 'none' ) ? 'block' : 'none';
    }
}

也就是说，您根本不需要任何脚本：页面在不使用任何JavaScript的情况下执行相同的操作：

#触发器1{显示：无；}
标签[用于]{
外观：按钮；
-webkit外观：按钮；
}
#触发器1：未（：选中）~*div\hello>ul>li>a{
显示：无；
}
#触发器1：：选中~*div#hello>ul>li>a{
显示：块；
}

按

x.getElementsByTagName（“ul”）

返回一个

节点列表（类似于数组），而不是单个元素。但是你可以只使用querySelectorAll
。它可以正常工作，我使用chromeUncaught ReferenceError:x未定义
@Klikdesainweb我已经更新了我的答案。你的更新就是完整的解决方案：）