Mettez en surbrillance un div en utilisant jquery

Question

Mettez en surbrillance un div en utilisant jquery

Demandé el 8 de Août, 2010: Quand la question a-t-elle été
186265 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

j'ai donc une page qui a un lien fixe un bar sur le côté. J'aimerais faire défiler les différentes divisions. Fondamentalement, la page est un seul site web, où je voudrais faire défiler les différentes divisions à l'aide de la boîte de menu sur le côté. Voici le jquery, j'ai jusqu'à présent

 $(document).ready(function() {

 $('#contactlink').click = function (){
  $(document).scrollTo('#contact');
 } 

 });

Le problème est-il automatiquement le contact div quand il charge, puis quand j'appuie sur le #contactlink dans le menu défile en arrière vers le haut.

EDIT: HTML

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">

    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>

    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />    

    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>                       

    <!-- page title-->
    <title><!-- Insert Title --></title>


</head>
<body>
    <div id="container">

        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>



    </div>
</body>

Merci pour l'aide

Demandé el 8 de Août, 2010 par tshauck

Answer 1

5 Réponses

Answer 2

360voto

Peter Ajtai Points 26377

Tout d'abord, votre code ne contient pas d' contact div, il a un contacts div!!!

Dans la barre latérale, vous avez contact dans le div en bas de la page, vous avez contacts. J'ai enlevé la finale s pour l'exemple de code. (vous aussi mal orthographié l' projectslink id dans la barre latérale).

Deuxièmement, prendre un coup d'oeil à certains des exemples de cliquer sur le jQuery, page de référence. Vous devez l'utiliser, cliquez sur j'aime, object.click( function() { // Your code here } ); afin de la lier à un gestionnaire d'événements click de l'objet.... Comme dans mon exemple ci-dessous. A part cela, vous pouvez également déclencher juste un clic sur un objet en l'utilisant sans arguments, comme object.click().

Troisièmement, scrollTo est un plugin de jQuery. Je ne sais pas si vous avez installé le plugin. Vous ne pouvez pas utiliser scrollTo() sans le plugin. Dans ce cas, les fonctionnalités que vous désirez est à seulement 2 lignes de code, donc je ne vois pas de raison d'utiliser le plugin.

Ok, maintenant, sur une solution.

Le code ci-dessous faites défiler jusqu'à la bonne div si vous cliquez sur un lien dans la barre latérale. La fenêtre doit être assez grande pour permettre le défilement:

  // This is a functions that scrolls to #{blah}link
function goToByScroll(id){
      // Remove "link" from the ID
    id = id.replace("link", "");
      // Scroll
    $('html,body').animate({
        scrollTop: $("#"+id).offset().top},
        'slow');
}

$("#sidebar > ul > li > a").click(function(e) { 
      // Prevent a page reload when a link is pressed
    e.preventDefault(); 
      // Call the scroll function
    goToByScroll($(this).attr("id"));           
});

Live Exemple

~~( Faites défiler jusqu'à la fonction prise à partir d' ici )~~

PS: Évidemment, vous devez avoir une raison valable pour aller dans cette voie au lieu d'utiliser des balises d'ancrage <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

Répondu el 8 de Août, 2010 par Peter Ajtai (26377 Points )

Answer 3

120voto

jAndy Points 93076

Il n'y a pas d' .scrollTo() méthode jQuery, mais il y a un .scrollTop() . .scrollTop attend un paramètre, c'est la valeur du pixel où la barre de défilement doit faire défiler jusqu'à.

Exemple:

$(window).scrollTop(200);

de défilement de la fenêtre (si il y a assez de contenu).

De sorte que vous pouvez obtenir cette valeur souhaitée .offset() ou .position().

Exemple:

$(window).scrollTop($('#contact').offset().top);

Cela devrait faire défiler l' #contact élément dans la vue.

Le non-jQuery autre méthode est - .scrollIntoView(). Vous pouvez appeler cette méthode sur tout DOM element comme:

$('#contact')[0].scrollIntoView(true);

true indique que l'élément est placé dans le haut alors qu' false serait de la placer sur le bas de la vue. La bonne chose avec la méthode jQuery est, vous pouvez même l'utiliser avec des fx functions comme .animate(). Donc, vous pourriez lisse de défilement quelque chose.

Référence: .scrollTop(), .position(), .offset()

Répondu el 8 de Août, 2010 par jAndy (93076 Points )

Answer 4

22voto

cnttlc Points 12

ça se tente !

Répondu el 25 de Août, 2014 par cnttlc (12 Points )

Answer 5

14voto

Ryan Points 2749

Ajoutez cette petite fonction et utilisez-le comme si :``

Répondu el 8 de Août, 2010 par Ryan (2749 Points )

Answer 6

6voto

christian Points 84

Les gars OK, il s’agit d’une petite solution, mais il fonctionne très bien.

Supposons que le code suivant :

vous voulez quand un nouveau message est ajouté à « the_div_holder », puis il fait défiler son contenu interne (de la div .post) à la dernière comme un chat. Donc, effectuez les opérations suivantes chaque fois qu’un nouveau .post est ajouté au titulaire principal div :

Répondu el 20 de Mars, 2013 par christian (84 Points )

Mettez en surbrillance un div en utilisant jquery

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Mettez en surbrillance un div en utilisant jquery

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: