嗨,大家好,我需要你的帮助,我点击按钮1时网页上有两个按钮,下方有一个箭头,按钮的背景颜色发生变化,点击按钮2同样适用但按钮1下方的箭头消失,背景颜色变化。
我已经实现了大部分这些属性,但我无法弄清楚为什么在点击button2后返回button1按钮2下面的箭头不会隐藏。
这是我的代码
+++++++++++++++++++++++++++++++++++++++++
$(document).ready(function() {
$('#select').click(function(){
$(this).css('background','#1169ff');
$(this).css('color','#ecf0f1');
$('#triangle_down').add('#triangle_down1').show();
if($('#select1').css('background','#1169ff') && $('#select1').css('color','#ecf0f1')){
$('#select1').css('background','#ecf0f1');
$('#select1').css('color','#1169ff');
} else if($('#triangle_down2').add('#triangle_down3').addClass('hidden')){
$('#triangle_down').add('#triangle_down1').show();
}
});
$('#select1').on('click', function() {
$(this).css('background','#1169ff');
$(this).css('color','#ecf0f1');
$('#triangle_down').add('#triangle_down1').addClass('hidden');
$('#select').css('background','#ecf0f1');
$('#select').css('color','#1169ff');
$('#triangle_down2').add('#triangle_down3').show();
});
})
#subscribe p{
text-align:center;
}
#subscribe input {
background: rgba(255, 255, 255, 0.52);
color: #666666;
vertical-align: middle;
width: 593px;
border: 1px solid rgba(255, 255, 255, 0.76);
padding: 0 10px;
height: 60px;
font-size: 20px;
outline: 0;
}
#subscribe input[type="submit"]{
background: rgb(255, 135, 19);
color: #ecf0f1;
/*width: auto;*/
padding: 14px 25px;
cursor: pointer;
margin-left: 50px
font-weight: bold;
height: 60px;
display: inline-block;
border: 2px solid;
font-size: 20px;
outline: 0;
}
#subscribe button[id="select"],[id="select1"]{
background: #ecf0f1;
width: 370px;
height: 60px;
/*padding-left: 100px;*/
/*padding-right: 100px;*/
padding: 0 10px;
vertical-align: middle;
font-size: 20px;
outline: 0;
color: #1169ff;
border: 2px solid;
text-align:center;
}
#subscribe input[id="main"] {
width: 150px;
outline: 0;
}
#triangle_down {
position:absolute;
width: 0;
height: 0;
border-top: 15px solid #1169ff;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
top:125px;
left:90px;
}
#triangle_down1 {
position:absolute;
width: 0;
height: 0;
border-top: 20px solid #ecf0f1;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
top:125px;
left:88px;
}
#triangle_down3 {
position:absolute;
width: 0;
height: 0;
border-top: 15px solid #1169ff;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
top:125px;
left:464px;
}
#triangle_down2 {
position:absolute;
width: 0;
height: 0;
border-top: 20px solid #ecf0f1;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
top:125px;
left:462px;
}
<div id="subscribe">
<form action="" method="post" onsubmit="">
<p>
<button type="button" id="select">Acheter</button>
<button type="button" id="select1">Louer</button>
</p>
<!-- Using 2 traingles to achieve border outline :) -->
<i id="triangle_down1" style="display: none"><i></i></i>
<i id="triangle_down" style="display: none"><i></i></i><br/>
<!--Louer triangles -->
<i id="triangle_down2" style="display: none"><i></i></i>
<i id="triangle_down3" style="display: none"><i></i></i><br/>
<div></div>
<p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/>
<a href="/results"> <input type="submit" id="main" value="Search"/></a>
</p>
</form>
由于
答案 0 :(得分:0)
这样做,查看jquery切换或其他方式这样做,因为你的代码很难在mo工作。在第一次点击f
中添加了$('#triangle_down2').add('#triangle_down3').hide();
$(document).ready(function() {
$('#select').click(function(){
$(this).css('background','#1169ff');
$(this).css('color','#ecf0f1');
$('#triangle_down').add('#triangle_down1').show();
if($('#select1').css('background','#1169ff') && $('#select1').css('color','#ecf0f1')){
$('#select1').css('background','#ecf0f1');
$('#select1').css('color','#1169ff');
$('#triangle_down2').add('#triangle_down3').hide();
} else if($('#triangle_down2').add('#triangle_down3').addClass('hidden')){
$('#triangle_down').add('#triangle_down1').show();
}
});
$('#select1').on('click', function() {
$(this).css('background','#1169ff');
$(this).css('color','#ecf0f1');
$('#triangle_down').add('#triangle_down1').hide();
$('#select').css('background','#ecf0f1');
$('#select').css('color','#1169ff');
$('#triangle_down2').add('#triangle_down3').show();
});
})
#subscribe p{
text-align:center;
}
#subscribe input {
background: rgba(255, 255, 255, 0.52);
color: #666666;
vertical-align: middle;
width: 593px;
border: 1px solid rgba(255, 255, 255, 0.76);
padding: 0 10px;
height: 60px;
font-size: 20px;
outline: 0;
}
#subscribe input[type="submit"]{
background: rgb(255, 135, 19);
color: #ecf0f1;
/*width: auto;*/
padding: 14px 25px;
cursor: pointer;
margin-left: 50px
font-weight: bold;
height: 60px;
display: inline-block;
border: 2px solid;
font-size: 20px;
outline: 0;
}
#subscribe button[id="select"],[id="select1"]{
background: #ecf0f1;
width: 370px;
height: 60px;
/*padding-left: 100px;*/
/*padding-right: 100px;*/
padding: 0 10px;
vertical-align: middle;
font-size: 20px;
outline: 0;
color: #1169ff;
border: 2px solid;
text-align:center;
}
#subscribe input[id="main"] {
width: 150px;
outline: 0;
}
#triangle_down {
position:absolute;
width: 0;
height: 0;
border-top: 15px solid #1169ff;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
top:125px;
left:90px;
}
#triangle_down1 {
position:absolute;
width: 0;
height: 0;
border-top: 20px solid #ecf0f1;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
top:125px;
left:88px;
}
#triangle_down3 {
position:absolute;
width: 0;
height: 0;
border-top: 15px solid #1169ff;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
top:125px;
left:464px;
}
#triangle_down2 {
position:absolute;
width: 0;
height: 0;
border-top: 20px solid #ecf0f1;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
top:125px;
left:462px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subscribe">
<form action="" method="post" onsubmit="">
<p>
<button type="button" id="select">Acheter</button>
<button type="button" id="select1">Louer</button>
</p>
<!-- Using 2 traingles to achieve border outline :) -->
<i id="triangle_down1" style="display: none"><i></i></i>
<i id="triangle_down" style="display: none"><i></i></i><br/>
<!--Louer triangles -->
<i id="triangle_down2" style="display: none"><i></i></i>
<i id="triangle_down3" style="display: none"><i></i></i><br/>
<div></div>
<p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/>
<a href="/results"> <input type="submit" id="main" value="Search"/></a>
</p>
</form>
答案 1 :(得分:0)
主要问题是您在使用.addClass('hidden')
.show()
jQuery在显示,隐藏和切换方面有点变幻无常,但他们将该元素的内联样式强加给display: hidden
或display: show
。你的班级隐藏了#39;被jQuery放置的内联样式覆盖。
当你展示和隐藏东西时,要保持一致。使用线条样式,例如添加/删除“隐藏”类的类别。或者&#39;显示&#39;,或使用jQuery中的.show()
,.hide()
和.toggle()
函数。
我清理了代码,并将其全部放在jsfiddle中。希望这有助于https://jsfiddle.net/agayn7yn/
答案 2 :(得分:0)
你没有隐藏三角形div,只是添加了一个隐藏的&#39;实际上并没有应用任何css属性。
而不是X
您要使用for i in range(len(r)):
X_new[:,i] = X[:,i] * r[i]
这将使用内联样式来显示/隐藏保证最高css特异性的div