Класс CSS не применяется в конкретном сценарии

0

Я делаю портфолио веб-сайта, а для раздела работ я использую Javascript для навигации по различным категориям, чтобы позже я мог придумать некоторые плавные навигационные анимации.

Мое навигационное меню находится слева, и у меня есть таблица, настроенная для отображения обложки и сопроводительных описаний с помощью класса div, который подталкивает левое поле только мимо меню и имеет ширину, подходящую для окна браузера при изменении размера. У меня также есть горизонтальная прокрутка.

Вот скриншот

Моя проблема заключается в том, что, хотя класс div, обернутый вокруг таблицы, работает на целевой странице портфеля, он не работает, когда я нажимаю один из элементов навигации. Класс I, примененный к самой таблице, кажется, не имеет проблем, но нет прокрутки или поля, в результате чего таблица отображается под навигацией.

Вот Javascript внутри html, который я использую для навигации:

<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;
}

Надеюсь, я дал достаточно информации, это определенная вещь. Спасибо, что посмотрели!

  • 1
    Вы пытались использовать инспектор DOM браузера, чтобы выяснить, откуда берутся эффективные стили элементов?
  • 0
    У меня есть, и это странно, потому что строка <div style = "display: none" id = "marvel" class = "portfolio"> даже не отображается
Показать ещё 2 комментария
Теги:

1 ответ

0

РЕШЕНИЕ: Мой скрипт копировал внутреннее содержимое, а это означало, что он не копировал атрибуты из div. Мне пришлось вложить еще один div

Вместо вложенных элементов вы можете использовать .outerHTML вместо .innerHTML.

  • 0
    О, спасибо! Я на самом деле не фанат вложения, потому что это кажется грязным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню