Question

每当我将鼠标移到＆＃39; li＆＃39;然后，那个特定的＆＃39; li＆＃39;属性需要更改为＆＃39; clsSect＆＃39;。另一方面，基于列表[li]选择，div内容必须设置为＆＃39; display：block＆＃39;其他应更改为＆＃39; display：none＆＃39;。

如果第一个＆＃39; li＆＃39;然后，选择第一个＆＃39; div＆＃39;同样需要选择如果第二个＆＃39; li＆＃39;然后选择第二个＆＃39; div＆＃39; div需要被选中，

以下代码无法按预期工作。有什么帮助吗？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
    <script src="js/jquery.min.js"></script>
    <style>
    
    </style>
    </head>
    <body>
    <div class="mainBodyContent" id="Contact">	
    <div class="perimgleft">
    	<img class="perImg" alt="This is for sample"/>
    	<div id="thisID3">
    	<p><span>sample3</span></p>
    <p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
    	</div></div> 
    </div>
    <div class="mainBodyContent" id="About">	
    <div class="perimgleft">
    	<img class="perImg" alt="This is for sample"/>
    	<div id="thisID2">
    	<p><span>sample3</span></p>
    <p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
    	</div></div> 
    </div>
    <div class="mainBodyContent" id="Careers">	
    <div class="perimgleft">
    	<img class="perImg" alt="This is for sample"/>
    	<div id="thisID1">
    	<p><span>sample1</span></p>
    <p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
    	</div></div> 
    </div>	
    
    <div id="selRound">
    <ul class="clearfix rouncorner">
    <li id="fpn1" class="myList clsSect"></li>
    <li id="fpn2" class="myList"></li>
    <li id="fpn3" class="myList"></li>
    </ul>
    </div>
    
    <script>
    var $hover = $("div.perimgleft img");
    $hover1 = $("#Contact div[class='perimgleft'] div");$hover2 = $("#About div[class='perimgleft'] div");$hover3 = $("#Careers div[class='perimgleft'] div");
    
    $("#selRound .myList").mouseover(function(evt) {
         if(evt.currentTarget.id == 'fpn1'){
    	 $hover1.css('display', 'block');
    	 ($hover2, $hover3).css('display', 'none');
    	}
    	else if(evt.currentTarget.id == 'fpn2'){
    	 ($hover1, $hover3).css('display', 'none');
    	 $hover2.css('display', 'block');
    	}else {
    	 ($hover1, $hover2).css('display', 'none');
    	 $hover3.css('display', 'block');
    	} 
    	
      });
      $("#selRound .myList").mouseout(function(evt) {


      });
     </script> 
     </body>
    </html>

＆＃13;

Answer 1

试试这个：

var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft']>div");$hover2 = $("#About div[class='perimgleft']>div");$hover3 = $("#Careers div[class='perimgleft']>div");

$("#selRound .myList").mouseover(function(evt) {
   if(evt.currentTarget.id == 'fpn1'){
   $hover1.css('display', 'block');
   $hover2.css('display', 'none');
   $hover3.css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
    $hover3.css('display', 'none');
    $hover1.css('display', 'none');
    $hover2.css('display', 'block');
}else {
    $hover2.css('display', 'none');
    $hover1.css('display', 'none');
    $hover3.css('display', 'block');
} 

});
$("#selRound .myList").mouseout(function(evt) {

}）;

Answer 2

需要清理代码。

在HTML中，我们设置了应隐藏/显示的内容的ID

...
<div id="fpn1" class="perimgleft">
...
<div id="fpn2" class="perimgleft">
...
<div id="fpn3" class="perimgleft">
...

然后我们将它们用作列表元素的数据属性

<li data-show="#fpn1" class="myList">fpn1</li>
<li data-show="#fpn2" class="myList">fpn2</li>
<li data-show="#fpn3" class="myList">fpn3</li>

然后用jquery隐藏所有内容

$('.perimgleft').hide();

这样我们就可以显示与悬停元素相关的正确内容：

$('ul.clearfix.rouncorner li').mouseover(function(){
    $('ul.clearfix.rouncorner li').removeClass("clsSect");
    $(this).addClass("clsSect");
    var contentId = $(this).data("show");
    $('.perimgleft').hide();
    $(contentId).show();
})

DEMO HERE

Answer 3

你看起来像这样吗？

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <style type="text/css">
      .mainBodyContent{
        display: none;
      }
   </style>
</head>

<body>
<div id="selRound">
    <ul class="clearfix rouncorner">
        <li id="fpn1" class="myList">contact</li>
        <li id="fpn2" class="myList">about</li>
        <li id="fpn3" class="myList">careers</li>
    </ul>
</div>
<div class="mainBodyContent" id="Contact">
    <div class="perimgleft">
        <img class="perImg" alt="This is for sample" />
        <div id="thisID3">
            <p><span>sample1</span>
            </p>
            <p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
            </p>
        </div>
    </div>
</div>
<div class="mainBodyContent" id="About">
    <div class="perimgleft">
        <img class="perImg" alt="This is for sample" />
        <div id="thisID2">
            <p><span>sample2</span>
            </p>
            <p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
            </p>
        </div>
    </div>
</div>
<div class="mainBodyContent" id="Careers">
    <div class="perimgleft">
        <img class="perImg" alt="This is for sample" />
        <div id="thisID1">
            <p><span>sample3</span>
            </p>
            <p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
            </p>
        </div>
    </div>
</div>



<script>

var hover1 = $("#Contact");
var hover2 = $("#About");
var hover3 = $("#Careers");


$(".myList").mouseout(function(evt) {
    $('.mainBodyContent').css('display','none');

});
$(".myList").mouseover(function(evt) {

    var currentId=$(this).attr('id');

    if(currentId=='fpn1'){
        hover1.css({'display':'block'});
    }
    if(currentId=='fpn2'){
        hover2.css({'display':'block'});
    }
    if(currentId=='fpn3'){
        hover3.css({'display':'block'});
    }
});



</script>
</body>


 </html>

如何在每个'li'上鼠标悬停时旋转地改变'div'的内容

3 个答案: