trouble with simple jQuery script

Question

I'm new to jQuery and I want to create my own web page. So my problem is if my menu is using href to link each item to its specified content, like this..

<li><a href="#doc1">Doc1</a></li>
<li><a href="#doc2">Doc2</a></li>
<li><a href="#doc3">Doc3</a></li>

<script>
$(document).ready(function(() {
     $(a).click(function() {
         $(b).show();
    });
});
</script>

What should I put in 'a' and 'b'? I've tried Googling this, but all the examples didn't show the complete script. I used to do it like this:

<li id="doc1menu">Doc1</li>
<script>
$(document).ready(function() {
    $("#doc1menu").click(function() {
        $("#doc1content").show();
    });
});
</script>

But now I want a single function that could be used for all items on my menu, instead of doing one function for each item.

Maxi Schvindt · Accepted Answer · 2016-02-02 03:05:53Z

1

try this solution(include jquery previously)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<li><a class="menu" href="#" idmenu="doc1">Doc1</a></li>
<li><a class="menu" href="#" idmenu="doc2">Doc2</a></li>
<li><a class="menu" href="#" idmenu="doc3">Doc3</a></li>

<div class="content" id="doc1" style="display:none">doc1</div>
<div class="content" id="doc2" style="display:none">doc2</div>
<div class="content" id="doc3" style="display:none">doc3</div>


<javascript type='text/javascript'>
$(document).ready(function() {
    $(".menu").click(function() {
        id = $(this).attr("idmenu");
        $(".content").hide();
        $("#"+id).show();
    });
});
</script>

Test: https://jsfiddle.net/Cuchu/cbtwndh6/

answered Feb 2, 2016 at 3:05

Maxi Schvindt

1,4601 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cathy305 Over a year ago

I tried this and it works, thanks. Really easy to understand

daniel · Accepted Answer · 2016-02-02 03:03:08Z

0

HTML

<li><a data-content="doc1" href="#doc1">Doc1</a></li>
<li><a data-content="doc2" href="#doc2">Doc2</a></li>
<li><a data-content="doc3" href="#doc3">Doc3</a></li>

<div id="doc1" class="content">
  doc1
</div>
<div id="doc2" class="content">
  doc2
</div>
<div id="doc3" class="content">
  doc3
</div>

Script

$(function() {

    //hide all content
    $(".content").hide();

  //meun function
  $("a").click(function() {
    var attr = $(this).attr("data-content");
    $(".content").hide();
    $("#" + attr).show();
  });

});

https://jsfiddle.net/ynpsq1wp/1/

answered Feb 2, 2016 at 3:03

daniel

1,0706 silver badges18 bronze badges

4 Comments

cathy305 Over a year ago

I tried yours and it work. Thanks. I just don't understand why href alone is not enough to point the menu item to its content. Why need to include data-content?

daniel Over a year ago

href="#doc1" is pure html that just help you to scroll to the position of the bookmark, but not include any javascript or jquery function like show and hide. data-content is a custom attribute to store the relationship of the button to the content, when the button click then get the content ID should be shown by $(this).attr("data-content");. hyperlinkcode.com/bookmark.php

daniel Over a year ago

href="#docX" is useless in this case and actually you can remove it here.

wrxsti Over a year ago

Instead of $(this).attr("data-content"); use $(this).data("content");

StealthSpoder · Accepted Answer · 2016-02-02 02:49:12Z

0

Sorry my original answer was wrong due to I was trying to answer the question on my phone. try using this and whatever you would like to show/hide in replace of the 'a'. I have used the toggle method to hide/show

$(document).ready(function() {
    $('li').click(function() {
        $('a', this).toggle();
    });
});

See js fiddle here: https://jsfiddle.net/rf5up5fr/12/

edited Feb 2, 2016 at 2:49

answered Feb 2, 2016 at 2:37

StealthSpoder

3461 silver badge7 bronze badges

Collectives™ on Stack Overflow

trouble with simple jQuery script

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related