Question

我正在建立一个显示多个x3d文件的网站，我只提供一个文件的代码（如下所示）

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Heritage Together</title>
    <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'>    </script>
    <link rel='stylesheet' type='text/css'   href='http://www.x3dom.org/download/x3dom.css'/>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <h1>Heritage Together</h1>
    <p>
        This page will show any two models and display them side by side
    </p>
    <script>
    function redNose()
    {
      if(document.getElementById('Deer__MA_Nose').getAttribute('diffuseColor')!= '1 0 0')
         document.getElementById('Deer__MA_Nose').setAttribute('diffuseColor', '1 0 0');
        else
          document.getElementById('Deer__MA_Nose').setAttribute('diffuseColor', '0 0 0');
    }
    </script>
        <ul id="menu">
            <li><a href="#">Areas</a>
                <ul>
                    <li><a href="#">area1</a></li>
                    <li><a href="#">area2</a></li>
                    <li><a href="#">area3</a></li>
                </ul>
            </li>
            <li><a href="#">Types of models</a>
                <ul>
                    <li><a href="#">model1</a></li>
                    <li><a href="#">model2</a></li>
                    <li><a href="#">model3</a></li>
                    <li><a href="#">model4</a></li>
                    <li><a href="#">model5</a></li>
                </ul>
            </li>
        </ul>
        <x3d width='500px' height='500px'>
            <scene>
                    <viewpoint position="-1.94639 1.79771 -2.89271"   orientation="0.03886 0.99185 0.12133 3.75685"></viewpoint>
                    <Inline nameSpaceName="Deer" mapDEFToID="true"
                            onclick='redNose();' url="Deer.x3d" />
            </scene>
        </x3d>
    </body>
</html>

我拥有的css文件如下

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}

body{
   background-color: black;
}

h1{
    color: white;
    text-indent: 600px;
}
p{
      color: white;
}

我想通过这个网站实现的目标是拥有我所在地区的x3d模型＆＃39;下拉菜单或“＆n;”类型的模型＆＃39;菜单。我想让用户选择并排显示的两个模型。问题是，如何在下拉菜单中获取模型以及如何显示它们

Answer 1

嗯，我不确定您是如何填充区域和模型列表的，所以我们只使用您拥有的HTML。

我们将使用DOM元素填充列表。为此，我们需要添加一个unuiqe标识符。

<ul id="menu">
    <li><a href="#">Areas</a>
        <ul id="area_list">
            <li><a href="#">area1</a></li>
            <li><a href="#">area2</a></li>
            <li><a href="#">area3</a></li>
        </ul>
    </li>
    <li><a href="#">Types of models</a>
        <ul id="model_list">
            <li><a href="#">model1</a></li>
            <li><a href="#">model2</a></li>
            <li><a href="#">model3</a></li>
            <li><a href="#">model4</a></li>
            <li><a href="#">model5</a></li>
        </ul>
    </li>
</ul>

正如您所看到的，ul元素中添加了ID。这将是识别儿童的标准。

JS：

var areaList = [],
    modelList = [];

function populateLists(){
  alert("running");
    var areaUL = document.getElementById('area_list').children;
    var modelUL = document.getElementById('model_list').children;

    for(var i = 0; i < areaUL.length; i++){
            areaList.push(areaUL[i].children[0].text);
    }
  alert("Area Items : " + areaList.length);
};

这将添加区域列表中的所有区域项目。您可以看到如何对模型执行相同操作。

我认为这是你正在寻找的，但你的问题很难遵循。

Changing background color with CSS on radio button input when :checked

很少有事情需要注意：

jQuery虽然不是强制性的，但可以更容易，更方便。

如果您使用文件系统列表填充列表，则需要服务器端逻辑将数据（文件列表）发送到javascript。在Javascript中没有本地方法来实现这一点。（不包括nodeJS服务器）

在网站上有多个x3d文件

1 个答案:

很少有事情需要注意：