[英]CSS class not applying in specific scenario
我正在制作一个作品集网站,在作品部分,我使用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;
}
希望我能提供足够的信息,这是一件具体的事情。 感谢您的光临!
解决方案:我的脚本正在复制内部内容,这意味着它没有从div复制属性。 我不得不嵌套另一个div
除了嵌套元素,您可以使用.outerHTML
而不是.innerHTML
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.