Wie 3 verschiedene `a` Links, öffnen Sie 3 verschiedene divs

Ich habe 3 Links a, die wie Buttons aussieht und ich möchte einen Div Text unten zeigen, wenn ich auf jeden von ihnen klicke. Also 3 Links a, 3 div Texte. Ich muss jquery verwenden und ich weiß nicht, welche Methode besser ist. Mit class = aktiv oder mit style = "display: none"?Wie 3 verschiedene `a` Links, öffnen Sie 3 verschiedene divs

Mein Code ist unten:

<div class="col-xs-4"> 
    <div class="packet-offer" id="Basic"> 
    <div class="vertical-middle"> 
     <a class="tab-link col-xs-12" href="#tab_Basic">Basic</a> 
    </div> 
    </div> 
</div> 
<div class="col-xs-4"> 
    <div class="packet-offer" id="Extra"> 
    <div class="vertical-middle"> 
     <a class="tab-link col-xs-12" href="#tab_Extra">Extra</a> 
    </div> 
    </div> 
</div> 
<div class="col-xs-4"> 
    <div class="packet-offer" id="Premium"> 
    <div class="vertical-middle"> 
     <a class="tab-link col-xs-12" href="#tab_Premium">Premium</a> 
    </div> 
    </div> 
</div> 
<div class="tab-boxes" id="tab_Basic"> 
    <div class="damageDetails"> 
    <h2 class="title results_found" id="results_found">Found <strong>15</strong> 
    offers in the category Basic from <strong>98,97</strong>, and they have:</h2> 
    <div class="row" style="margin-bottom: 40px;"> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Human resources</span> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Natural damages</span> 
    </div> 
    </div><!--damageDetails--> 
</div><!--tab_Basic--> 
<div class="tab-boxes" id="tab_Extra"> 
    <div class="damageDetails"> 
    <h2 class="title results_found" id="results_found">Found <strong>15</strong> 
    offers in the category Extra from <strong>198,97</strong>, and they have:</h2> 
    <div class="row" style="margin-bottom: 40px;"> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Human resources</span> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Natural damages</span> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Animal damages</span> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Space damages</span> 
    </div> 
    </div><!--damageDetails--> 
</div><!--tab_Extra--> 
<div class="tab-boxes" id="tab_Premium"> 
    <div class="damageDetails"> 
    <h2 class="title results_found" id="results_found">Found <strong>8</strong> 
    offers in the category Premium from <strong>358,79</strong>, and they have:</h2> 
    <div class="row" style="margin-bottom: 40px;"> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Human resources</span> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Natural damages</span> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Animal damages</span> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Space damages</span> 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
     <i class="fa fa-check"></i>Premium</span> 
    </div> 
    </div><!--damageDetails--> 
</div><!--tab_Premium-->

Ich habe auch die Bilder zum besseren Verständnis: Basic Extra

Die Website nicht lassen Sie mich drittes Bild für den Premium-Link zu setzen. Aber es ist fast dasselbe.

Quelle

2017-03-13 kostas

Sie verwenden Bootstrap css Sie mit bootstrap.js so werden auch? wenn ja, könnten Sie Tabs oder Pillen verwenden https://v4-alpha.getbootstrap.com/components/navs/#tabs – ConfusedShark

Ich sehe Sie Bootstrap verwenden, so können Sie Bootstrap tabs Komponente verwenden.

Sie tun das gleiche, alles, was Sie brauchen, ändern Sie ein wenig Ihren Code oder wenn Sie Ihren eigenen Js-Code verwenden möchten - verwenden Sie display:none wie Bootstrap.

Quelle

2017-03-13 12:35:53

Dank @ Yaroslav Molchan, aber ich weiß nicht die Details und wie man Js-Code und diese Anzeige verwenden: nichts, was du zu mir gesagt hast. Und da ist noch ein anderes Problem. Bei jeder Änderung der 3 Buttons werden auch unter den Texten einige verschiedene Rechenvorgänge geändert. Unterschiedliche Preise für jeden Button – kostas

Irgendwelche Hilfe bitte ... – kostas

Sie können beide verwenden. Ein geeigneter Weg, beides zu verwenden. 'active' Klasse für das CSS der ausgewählten Schaltfläche. Sie können die Tabulatoren separat durch 'display: none' ausblenden.

<div class="col-xs-4"> 
    <div class="packet-offer" id="Basic"> 
     <div class="vertical-middle"> 
       <a class="tab-link col-xs-12" data-tab="tab_Basic" href="javascript:void(0);">Basic</a> 
     </div> 
    </div> 
</div> 
<div class="col-xs-4"> 
    <div class="packet-offer" id="Extra"> 
     <div class="vertical-middle"> 
      <a class="tab-link col-xs-12" data-tab="tab_Extra" href="javascript:void(0);">Extra</a> 
     </div> 
    </div> 
</div> 
<div class="col-xs-4"> 
    <div class="packet-offer" id="Premium"> 
     <div class="vertical-middle"> 
      <a class="tab-link col-xs-12" data-tab="tab_Premium" href="javascript:void(0);">Premium</a> 
     </div> 
    </div> 
</div> 

///Rest HTML 

<script> 

$(function() { 
    $(".tab-link").click(fnuction() { 
     var tab = $(this).attr("data-tab"); 
     $(".tab-link").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab-boxes").hide(); 
     $("#"+tab).show(); 
    }); 
}); 
</script>

Quelle

2017-03-18 06:34:11

Danke @Akshay Prakash. Aber ich möchte wissen, ob es auch dynamisch ist? Ich meine, wenn dieser Code bereit ist, Rechenprozesse zu verarbeiten. Oder brauche ich etwas Mix zwischen PHP und HTML? Ich weiß es nicht. – kostas

$('.tab-link').click(function() { 
 
    $('.tab-boxes').hide(); 
 
    $($(this).attr('href')).show(); 
 
})

.tab-boxes { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-4"> 
 
    <div class="packet-offer" id="Basic"> 
 
    <div class="vertical-middle"> 
 
     <a class="tab-link col-xs-12" href="#tab_Basic">Basic</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-xs-4"> 
 
    <div class="packet-offer" id="Extra"> 
 
    <div class="vertical-middle"> 
 
     <a class="tab-link col-xs-12" href="#tab_Extra">Extra</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-xs-4"> 
 
    <div class="packet-offer" id="Premium"> 
 
    <div class="vertical-middle"> 
 
     <a class="tab-link col-xs-12" href="#tab_Premium">Premium</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="tab-boxes" id="tab_Basic"> 
 
    <div class="damageDetails"> 
 
    <h2 class="title results_found" id="results_found">Found <strong>15</strong> offers in the category Basic from <strong>98,97</strong>, and they have:</h2> 
 
    <div class="row" style="margin-bottom: 40px;"> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Human resources</span> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Natural damages</span> 
 
    </div> 
 
    </div> 
 
    <!--damageDetails--> 
 
</div> 
 

 

 
<!--tab_Basic--> 
 
<div class="tab-boxes" id="tab_Extra"> 
 
    <div class="damageDetails"> 
 
    <h2 class="title results_found" id="results_found">Found <strong>15</strong> offers in the category Extra from <strong>198,97</strong>, and they have:</h2> 
 
    <div class="row" style="margin-bottom: 40px;"> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Human resources</span> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Natural damages</span> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Animal damages</span> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Space damages</span> 
 
    </div> 
 
    </div> 
 
    <!--damageDetails--> 
 
</div> 
 

 

 
<!--tab_Extra--> 
 
<div class="tab-boxes" id="tab_Premium"> 
 
    <div class="damageDetails"> 
 
    <h2 class="title results_found" id="results_found">Found <strong>8</strong> offers in the category Premium from <strong>358,79</strong>, and they have:</h2> 
 
    <div class="row" style="margin-bottom: 40px;"> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Human resources</span> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Natural damages</span> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Animal damages</span> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Space damages</span> 
 
     <span class="col-xs-6 col-sm-4 col-md-3 standar-offers"> 
 
     <i class="fa fa-check"></i>Premium</span> 
 
    </div> 
 
    </div> 
 
    <!--damageDetails--> 
 
</div> 
 
<!--tab_Premium-->

Quelle

2017-03-18 06:44:09

Danke @tye. Aber ich möchte wissen, ob es auch dynamisch ist? Ich meine, wenn dieser Code bereit ist, Rechenprozesse zu verarbeiten. Oder brauche ich etwas Mix zwischen PHP und HTML? Ich weiß es nicht. – kostas

Wie 3 verschiedene `a` Links, öffnen Sie 3 verschiedene divs

Antwort

Verwandte Themen