Javascript 如何旋转更改'；分区'；在每个'；李'；_Javascript_Jquery_Html

Javascript 如何旋转更改'；分区'；在每个'；李'；

javascript jquery html

Javascript 如何旋转更改'；分区'；在每个'；李'；,javascript,jquery,html,Javascript,Jquery,Html,每当我将鼠标移到'li'上时，该特定的'li'属性就需要更改为'clsSect'。另一方面，根据列表[li]选择，div内容必须设置为“display:block”，其他内容应更改为“display:none” 如果选择了第一个'li'，则同样需要选择第一个'div' 如果选择了第二个'li'，则需要选择第二个'div' 下面的代码无法按预期工作。需要帮忙吗样本3 欲了解“公司”的工作机会，请参阅我们的样本3 欲了解“公司”的工作机会，请参阅我们的样本1 欲了解“公司”的工作机会，请参

每当我将鼠标移到'li'上时，该特定的'li'属性就需要更改为'clsSect'。另一方面，根据列表[li]选择，div内容必须设置为“display:block”，其他内容应更改为“display:none”

如果选择了第一个'li'，则同样需要选择第一个'div' 如果选择了第二个'li'，则需要选择第二个'div'

下面的代码无法按预期工作。需要帮忙吗


样本3
欲了解“公司”的工作机会，请参阅我们的
样本3
欲了解“公司”的工作机会，请参阅我们的
样本1
欲了解“公司”的工作机会，请参阅我们的





变量$hover=$（“div.perimgleft img”）；
$hover1=$（“#联系部门[class='perimgleet']div”）$hover2=$（“#About div[class='perimgleet']div”）$hover3=$（“#职业部门[class='perimgleft']div”）；
$（“#selRound.myList”）.mouseover（函数（evt）{
如果（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'）；
}否则{
（$hover1，$hover2）.css（'display'，'none'）；
$hover3.css（'display'，'block'）；
} 
});
$（“#selRound.myList”）.mouseout（函数（evt）{
});

试试这个：

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) {

}))

需要清理代码

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

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

因此，我们将显示与悬停元素相关的正确内容：

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

你看起来像这样吗

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


.主体内容{
显示：无；
}

联系人
关于
职业生涯

样本1

欲了解“公司”的工作机会，请参阅我们的

样本2

欲了解“公司”的工作机会，请参阅我们的

样本3

欲了解“公司”的工作机会，请参阅我们的

var hover1=$（“#联系人”）；
var hover2=$（“#关于”）；
var hover3=$（“职业”）；
$（“.myList”）.mouseout（函数（evt）{
$（'.mainBodyContent'）.css（'display'，'none'）；
});
$（“.myList”）.mouseover（函数（evt）{
var currentId=$（this.attr（'id'）；
如果（当前ID='fpn1'）{
css（{'display'：'block'}）；
}
如果（当前ID='fpn2'）{
css（{'display'：'block'}）；
}
如果（currentId=='fpn3'）{
css（{'display'：'block'}）；
}
});

您所说的选中是什么意思？点击或悬停？是的，我的意思是“悬停”。嗨，这段代码在IE8中也能工作吗？另外，这是一个有效的DOM操作吗？是的，它在IE8上工作，是的，这个解决方案需要低DOM操作（只是切换类和隐藏/显示一些div）。这段（上面）代码只是大量代码中的一段。因此，这段代码应该是高效的DOM操作，而不是糟糕的DOM操作。上面的代码能满足吗？当然可以。我的意思是，如果这个答案对你有帮助，请把它标记为正确

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

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