Question

我有两个按钮和两个div（我把一个放在另一个上面）。我使“info”类可见，“info2”隐藏。我需要按下“全局”按钮 - “信息”div显示在“亚洲”按钮 - “info2”div上。我试过这段代码，但它没有用：

$('.corpo_button_asia').click(function(){ 

                $('.info').hide;
                $('.info2').show;


        }); 

$('.corpo_button_global').click(function(){ 

                $('.info').show;
                $('.info2').hide;


        });

这是html代码：

<div clas"corpo_buttons">
         <div class="corpo_buttons_global">
                   Global
         </div>
         <div class="corpo_buttons_asia">
                    Asia
         </div>
</div>
<div class="info">
           Info1
</div>
<div class="info2">
           Info2
</div>

和css：

.corpo_buttons
{
height:50px;
}

.corpo_buttons_global
{
position:absolute;
z-index:10;
width:50px;
float:left;
background-color:rgb(23,55,94);
color:#FFF;
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}

.corpo_buttons_asia
{
position:relative;
z-index:2;
left:45px;
width:50px;
float:left;
padding:2px;
background-color:rgb(197,197,197);
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}

.info
{
position:absolute;
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
}

.info2
{
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
visibility: hidden;
}

Answer 1

尽管@Sorpigal注意到了类错误，但另一个问题是你实际上并没有调用 .show和.hide，因为你之后省略了括号。功能名称。

他们应该说.show()和.hide()！

Answer 2

问题是您的课程作业是<div class="corpo_buttons_asia">，但在jquery中您说.corpo_button_asia - 请注意“按钮”与“按钮”

先修复此问题。

Answer 3

试试这个：

的 DEMO jsBin 的

$('.corpo_buttons_asia').click(function(){ $('.info').hide(); $('.info2').show(); }); $('.corpo_buttons_global').click(function(){ $('.info').show(); $('.info2').hide(); });

Answer 4

这可能与您的“可见性：隐藏”有关在.info2。我建议尝试使用“display：none;”代替。

jquery show / hide方法的工作方式是将显示从无切换到阻塞再返回。有可能它根本没有注意你的能见度状态。

如果您完全依赖于css中的可见性，则可以更改代码以切换该代码：

$('.info').css('visibility', 'hidden');
$('.info2').css('visibility', 'visible');

Answer 5

检查更正后面的

<div>
    <div class="corpo_buttons">
        <div class="corpo_buttons_global">
            Global
        </div>
        <div class="corpo_buttons_asia">
            Asia
        </div>
    </div>
    <div class="info">
        Info1
    </div>
    <div class="info2">
        Info2
    </div>
</div>
</form>

<script language="javascript">  
$('.corpo_buttons_global').click(function(){  

            $('.info').hide(); 
            $('.info2').show();  

    });

$（'。corpo_buttons_asia'）。点击（function（）{

            $('.info').show(); 
            $('.info2').hide(); 


    });  

</script>

Answer 6

你的html类名与jquery选择器不匹配。

html第一行中的

‍‍<div clas应为<div class=. 无论如何，我为你创造了一个jsfiddle。希望这可以帮助 http://jsfiddle.net/5MvHZ/1/

使用javascript按下按钮时切换div

6 个答案: