2017-08-05 2 views
2

Ich habe eine Reihe von Jquery-Registerkarten mit Hash-Anker-Registerkarten.Schaltfläche Klick Trigger Anker Registerkarte

Ich möchte die zweite Registerkarte '#second' auslösen, wenn ich auf die Senden-Schaltfläche klicken.

Ich habe einige Lösungen verwendet, funktioniert aber nicht.

<script type="text/javascript"> 
$('#bt').click(function() { 
    $('#ex').click(); 
}); 
</script> 

<div id="tabs"> 
<ul id="tabbbs"> 
<li><a href="#first" id="ex"></li> 
<li><a href="#second" id="ex"></li> 
<li><a href="#third"></li> 
</ul> 

<div id="first" > 
<p>LOREM IPSUM</p> 
</div> 
<div id="second" > 
<p>LOREM IPSUM</p> 
</div> 
<div id="third" > 
<p>LOREM IPSUM</p> 
</div> 
</div> 
<button type="submit" id="bt" class="single_add_to_cart_button button alt"> 
    <?php echo esc_html($product->single_add_to_cart_text()); ?>OK</button> 

Antwort

1

Mehrere gleiche id ist nicht korrekt, wenn Sie versuchen, sie mit jQuery zu beschäftigen: -

BTW können Sie wie unten tun: -

$('#bt').click(function() { 
    $('ul li a[href="#second"]').click(); 
}); 

Hinweis: - jQuery-Bibliothek benötigt fügen Sie vor Ihrem Skriptcode hinzu, damit es funktioniert.

Nur ein Demo Beispiel (wenn Sie entweder Link oder Button-Klasse klicken, wird hinzugefügt): -

$('#bt').click(function() { 
 
$('ul li a[href="#second"]').click(); 
 
}); 
 

 
$('a[href="#second"]').click(function() { 
 
$(this).addClass('active'); 
 
});
.active{ 
 
color:green; 
 
font-size:20px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tabs"> 
 
<ul id="tabbbs"> 
 
<li><a href="#first" id="ex">Click1</a></li> 
 
<li><a href="#second" id="ex">Click2</a></li> 
 
<li><a href="#third">Click3</a></li> 
 
</ul> 
 

 
<div id="first" > 
 
<p>LOREM IPSUM</p> 
 
</div> 
 
<div id="second" > 
 
<p>LOREM IPSUM</p> 
 
</div> 
 
<div id="third" > 
 
<p>LOREM IPSUM</p> 
 
</div> 
 
</div> 
 
<button type="submit" id="bt" class="single_add_to_cart_button button alt">OK</button>

+0

ich habe v2.0.0 von Jquery, die man empfohlen – SandeepTete

+0

Dieser funktionierte perfekt ... Auch ich bin neugierig zu wissen, ob es notwendig ist, $ (this) zu verwenden. addClass ('aktiv'); weil es auch ohne dieses funktionierte. – SandeepTete

+0

@SandeepTete Ich zeige Ihnen nur ein Beispiel. ha ha. Bedeutet, wie ich dir zeigen kann, dass mein Code funktioniert oder nicht. Es ist nur ein Beispiel –

0

Sie mit Tab-Index auch versuchen können:

$('#bt').click(function() { 
    $("#tabs").tabs({ active: 1 }); 
}); 
0

Wenn Sie so einfach auf Anker Tag klicken möchten Zuallererst müssen Sie ein click-Ereignis auf dem Anchor-Tag binden und dann ein Klick-Ereignis beim Klicken auf die Schaltfläche auslösen. Wie unten Methode

$(function(){ 
 

 
$('#ex').click(function() { 
 
    console.log('Hello clicked!'); 
 
}); 
 

 

 
$('#bt').click(function() { 
 
    $('#ex').click(); 
 
}); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="tabs"> 
 
    <ul id="tabbbs"> 
 
    <li><a href="#first" id="ex">Hi</a></li> 
 
    <li><a href="#second" id="ex">Hello</a></li> 
 
    <li><a href="#third">By</a></li> 
 
    </ul> 
 

 
    <div id="first" > 
 
    <p>LOREM IPSUM</p> 
 
    </div> 
 
    <div id="second" > 
 
    <p>LOREM IPSUM</p> 
 
    </div> 
 
    <div id="third" > 
 
    <p>LOREM IPSUM</p> 
 
    </div> 
 
</div> 
 
<button type="submit" id="bt" class="single_add_to_cart_button button alt">OK</button>

Verwandte Themen