Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Bottone next in .net e jquery

    Ciao a tutti,
    sono riuscito a fare questo semplice script dove cliccando sui tab si attiva il link e compaiono i pannelli corrispondenti, quello che non riesco a fare è il bottone "Next" o meglio, la funzione di "active" dei link a fianco funaziona ma ho due problemi:
    1) non nasconde ed visualizza il pannello corrispondente, 2) Mette e toglie "active" su tutti i link della pagina . Sviluppo in ambiente Visual studio.

    Grazie a tutti

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/base/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(document).ready(function () {

    $('ul.nav').each(function () {
    // For each set of tabs, we want to keep track of
    // which tab is active and its associated content
    var $active, $content, $links = $(this).find('a');


    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
    $active.parent('li').addClass('active');
    $active.addClass('active');
    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
    $(this.hash).hide();
    });


    // Bind the click event handler
    $(this).on('click', 'a', function (e) {


    // Make the old tab inactive.
    $active.parent('li').removeClass('active');
    //$active.removeClass('active');
    $content.hide();


    // Update the variables with the new link and content
    $active = $(this);
    $content = $(this.hash);


    // Make the tab active.
    $active.parent('li').addClass('active');
    $content.show();


    // Prevent the anchor's default click action
    e.preventDefault();
    });


    $("#p").click(function () {
    $('li.active').removeClass('active').next().addCla ss('active');

    });
    });


    </script>
    <div id="content" class="container " >
    <div class="row">
    <section>
    <div class="wizard">
    <div class="wizard-inner">
    <div class="connecting-line"></div>

    <ul class="nav nav-tabs" id="tabx" >
    <li ><a href="#tab0" title="Ford"><span class="round-tab">
    <i class="glyphicon glyphicon-folder-open"></i>
    </span></a></li>
    <li><a href="#tab1" title="Toyota"><span class="round-tab">
    <i class=" glyphicon glyphicon-pencil"></i>
    </span></a></li>
    <li ><a href="#tab2" title="Honda"><span class="round-tab">
    <i class="glyphicon glyphicon-picture"></i>
    </span></a></li>
    <li class="disabled"><a href="#tab3" title="Audi"><span class="round-tab">
    <i class="glyphicon glyphicon-ok"></i>
    </span></a></li>

    </ul>
    </div>


    </div>
    <div class="row">
    <div class="tab-content">
    <div class="tab-pane active" id="tab0">
    <h3>CREATE EXAM</h3>
    0
    <ul class="list-inline pull-right">
    <li><button type="button" class="btn btn-primary next-step" id="p">Save and continue</button></li>
    </ul>
    </div>
    <div class="tab-pane" role="tabpanel" id="tab1">
    <h3>ASSIGN SUBJECTS</h3>
    1
    <ul class="list-inline pull-right">
    <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
    <li><button type="button" class="btn btn-default next-step" >Skip</button></li>
    <li><button type="button" class="btn btn-primary btn-info-full next-step" onclick="p">Save and continue</button></li>
    </ul>
    </div>
    <div class="tab-pane" role="tabpanel" id="tab2">
    <h3>ASSIGN CLASSES</h3>
    2
    <ul class="list-inline pull-right">
    <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
    <li><button type="button" class="btn btn-default next-step" onclick="showNext()">Skip</button></li>
    <li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
    </ul>

    </div>
    <div class="tab-pane" role="tabpanel" id="tab3">
    <h3>PUBLISH SCHEDULE</h3>
    3
    <fieldset>
    <div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Publish</button>
    </div>
    </div>
    </fieldset>
    </div> </div>
    </div>
    </section> </div></div>
    </asp:Content>
    Riccardo Rossi - Smart Agent 3

    GENIALTEK il tuo sito presto e bene
    www.genialtek.it

  2. #2
    Al momento ho risolto così:

    function next_onClick() {
    //guardo se è disattivato il link
    if ($('#c .active').next().hasClass('disabled')) {
    alert("dis A");
    return false;
    };






    var linkx = $('#c .active').children('a').attr('href');
    // alert(linkx); // ora ho il link di quello attivo posso fare le verifiche
    $content = $(linkx);
    $content.hide();


    linkx = $('#c .active').next().children('a').attr('href');


    $content = $(linkx);
    $content.show();
    $('li.active').removeClass('active').next().addCla ss('active');




    //$('li.active').removeClass('active').next().addCla ss('active');








    }; // FINE next

    Se c'è una soluzione più elegante fatemi sapere
    Riccardo Rossi - Smart Agent 3

    GENIALTEK il tuo sito presto e bene
    www.genialtek.it

  3. #3
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,216
    genial ti invito a leggere il regolamento. non fai mai uso del tag code. se lo desideri puoi riaprire la discussione rispettando il regolamento.
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.