переключаться между скрытыми изображениями и текстом, используя цель в jquery - PullRequest
Новая
       11

переключаться между скрытыми изображениями и текстом, используя цель в jquery

0 голосов
/ 03 апреля 2020

У меня есть страница для 4 проектов. Это яблоко, банан, апельсин и груша. Я хотел бы щелкнуть их названия в списке, чтобы переключать их изображения и тексты соответственно. Например: когда я нажимаю «яблоко» в списке, изображения принадлежат #imageapple в .imagebox, и должен отображаться только текст с идентификатором #textapple, а URL-адрес в окне получает новый ха sh # яблоко. Когда я щелкаю по заголовку оранжевого цвета, он показывает только #imageorange и #textorange, а URL-адрес в окне получает ha sh #orange. Я пробовал target, attr, а не в Jquery, но мой код не работает.

Вот код: 

$(function(){
      $('.title').click(function(){
        $('.imagebox').not('#image' + $(this).attr('target')).hide();
        $('#image' + $(this).attr('target')).toggle();
        $('.text').not('#text' + $(this).attr('target')).hide();
        $('#text' + $(this).attr('target')).toggle();
        window.location.hash = target;
      });
   });
nav{
  width: 10%;
  index:999;
  padding-left: 1vh;
  flex:1;
  flex-basis: 18%;
  overflow: none;
}

nav > ul.menu {
  list-style-type: none;
}

li{
  color:black;
  font-family: 'Rubik', sans-serif;
  font-size: 2vh;
}
li:hover {
  font-style: italic;
  background-color: black;
  color: white;
  cursor: pointer;
}
.content{
  flex:1;
  flex-basis: 82%;
  display: flex;
}


.imagebox{
  flex: 1;
  overflow: scroll;
  width: 70%;
  height: 100vh;
  left:0;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}

.imagebox img{
  width: 100%;
}
.text {
  height: 100vh;
  overflow: scroll;
  margin-right: 2vh;
  margin-left:2vh;
  width: 30%;
  -ms-overflow-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kexin Hao</title>
</head>
<body>

  <nav>
    <ul class="menu">
        <li class="title" target="apple">APPLE</li>
        <li class="title" target="banana">BANANA</li>
        <li class="title" target="orange"> ORANGE</li>
        <li class="title" target="pear">PEAR</li>
    </ul>
  </nav>

jsfiddle link ниже

1 Ответ

0 голосов
/ 03 апреля 2020

Не уверен, что понимаю 100%, но у меня есть кое-что, что может помочь.

Во-первых, есть несколько проблем с тем, что у вас есть. В HTML вам нужно определить элемент imagebox, в котором будет отображаться изображение (поправьте меня, если я ошибаюсь), и я добавил это. Также в строке window.location.hash = target; есть cra sh, который пытается перенаправить его к источнику файла изображения, который, как кажется, но целевой элемент должен быть разрешен (см. Код в приложении).

Я сделал Код выбора изображения немного проще, и теперь при нажатии на ссылку цель разрешается (Apple / banana / orange / pear), и изображение выбирается и добавляется в поле для изображений. Идея была бы одинаковой для текста.

Вот тот HTML / JQuery, который я использовал (имена изображений могут немного отличаться в вашей системе) 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css.css">
	<title>Kexin Hao</title>
	<script>
		$(function(){
		  $('.title').click(function()
		  {
			var ClickedTarget = $(this).attr('target');
			$(".imagebox").attr("src",ClickedTarget+".jpg");
					
	
		  });
		});
	</script>
</head>
<body>

  <nav>
    <ul class="menu">
        <li class="title" target="apple">APPLE</li>
        <li class="title" target="banana">BANANA</li>
        <li class="title" target="orange"> ORANGE</li>
        <li class="title" target="pear">PEAR</li>
    </ul>
  </nav>
  
  <img class ='imagebox'>   </img>
</body>
</html>

Надеюсь, это поможет!

...