时间戳

首页 > 解决方案 > 使用 jquery 中的目标在隐藏的图像和文本之间切换

jquery - 使用 jquery 中的目标在隐藏的图像和文本之间切换

问题描述

我有 4 个项目的页面。它们是苹果、香蕉、橙子和梨。我想在列表中单击他们的标题，以便分别切换他们的图像和文本。例如：当我点击列表中的“apple”时，图像属于.imagebox中的#imageapple，id为#textapple的文本应该只显示，窗口中的url得到一个新的hash#apple。当我单击标题橙色时，它只显示#imageorange 和#textorange，并且窗口中的url 获取哈希#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链接

标签： jquerytoggletarget

解决方案

不确定我是否理解 100%，但我有一些可能会有所帮助的东西。

首先，您所拥有的存在一些问题。在 HTML 中，您需要定义一个 imagebox 元素，其中将显示图像（如果我错了，请纠正我）并且我已经添加了这个。尝试重定向到图像文件源的行也出现崩溃window.location.hash = target;，但需要解析目标元素（参见附加代码）。

我使图像选择代码更简单一些，现在当单击链接时，目标被解析（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>

希望这可以帮助！

推荐阅读