Question

我正在制作一个投资组合网站，而对于作品部分，我正在使用Javascript来浏览不同的类别，以便稍后我可能会想到一些流畅的导航动画。

我的导航菜单位于左侧，我设置了一个表格，用于显示图稿和随附的描述，其中div类将左边距推到菜单之后，宽度适合浏览器窗口-尺寸。我也有水平滚动。

我的问题是，虽然包裹在表格中的div类在投资组合登录页面上工作，但当我点击其中一个导航项目时，它似乎不起作用。我应用于表格本身的类似乎没有任何问题，但没有滚动或边距，导致表格显示在导航下方。

这是我用于导航的html里面的Javascript：

<script>

function changeNavigation(id) 
{document.getElementById('navigate').innerHTML=document.getElementById(id).innerHTML}

</script>

以下是导航菜单的基础：

<ul>
     <li><a name="marvel" onClick="changeNavigation('marvel')"><span>Marvel Super Hero Squad: Comic Combat</span></a></li>
     <li><a name="kungfupanda2" onClick="changeNavigation('kungfupanda2')"><span>Kung Fu Panda 2</span></a></li>
     <li class='last'><a name="moderngirl" onClick="changeNavigation('moderngirl')"><span>Modern Girl</span></a></li>
  </ul>

以下是导航“页面”（因为代码很长，我只有登录页面和另外一个）：

<div id="navigate">

<!-- Portfolio Landing -->
<div class="portfolio">
<table class="artwork">

<!-- Artwork -->
<tr>
<th>
<img src="C:/Users/Shannon/Desktop/nogoodmonstroddity/Assets/placeholder.png" alt="" />
</th>

<th>
<img src="C:/Users/Shannon/Desktop/nogoodmonstroddity/Assets/placeholder.png" alt="" />
</th>

<th>
<img src="C:/Users/Shannon/Desktop/nogoodmonstroddity/Assets/placeholder.png" alt="" />
</th>

<th>
<img src="C:/Users/Shannon/Desktop/nogoodmonstroddity/Assets/placeholder.png" alt="" />
</th>
</tr>
<!-- Artwork -->

<!-- Descriptions -->
<tr>
<td>
<b>★</b>

<a href="#">
THIS IS PORTFOLIO LANDING
</a>

<b>★</b>
</td>

<td>
<p>
<b>Name of art</b> here is some text about the art and blah blah<br/>
Here is a second line of text.
</p>
</td>

<td>
<p>
Art #3
</p>
</td>

<td>
<p>
Art #4
</p>
</td>

</tr>
<!-- /Descriptions -->

</table>
</div></div>
<!-- /Portfolio Landing -->

<!-- Portfolio Marvel -->
<div style="display:none " id="marvel" class="portfolio">
<table class="artwork">

<!-- Artwork -->
<tr>
<th>
<img src="C:/Users/Shannon/Desktop/nogoodmonstroddity/Assets/placeholder.png" alt="" />
</th>

<th>
<img src="C:/Users/Shannon/Desktop/nogoodmonstroddity/Assets/placeholder.png" alt="" />
</th>

<th>
<img src="C:/Users/Shannon/Desktop/nogoodmonstroddity/Assets/placeholder.png" alt="" />
</th>

<th>
<img src="C:/Users/Shannon/Desktop/nogoodmonstroddity/Assets/placeholder.png" alt="" />
</th>
</tr>
<!-- Artwork -->

<!-- Descriptions -->
<tr>
<td>
<b>★</b>

<a href="#">
THIS IS PORTFOLIO MARVEL
</a>

<b>★</b>
</td>

<td>
<p>
<b>Name of art</b> here is some text about the art and blah blah<br/>
Here is a second line of text.
</p>
</td>

<td>
<p>
Art #3
</p>
</td>

<td>
<p>
Art #4
</p>
</td>

</tr>
<!-- /Descriptions -->

</table>
</div>
<!-- /Portfolio Marvel -->

以下是css类和我用于所有内容的另一个包装器：

table.artwork { 
padding: 10px;
margin-left: auto;
margin-right: auto;
}

.portfolio {
overflow-y: hidden;
overflow-x: scroll;
margin-left: 200px;
}

#contentwrapper{
    float: left;
    width: 99%;
    margin: 20px 0px;
}

希望我提供足够的信息，这是一个特定的事情。谢谢你的期待！

Answer 1

解决方案：我的脚本正在复制内部内容，这意味着它没有从div复制属性。我不得不嵌套另一个div

您可以使用.outerHTML代替.innerHTML而不是嵌套元素。

CSS类不适用于特定场景

1 个答案: