CODEWITHSUNDEEP
jqueryhtmlonclick
Lbezerra
Lbezerra

Reputation: 23

Jquery Div content change when click LI option

What's up guys I'm here to ask how i change the div content when click the link here is the code:

    <html>
    <div id="bigpanel">
    <div id="tabs">
    <div id="fragment-1" class="ui-tabs-panel"> </div>  
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"></div>
    </div>

    <div id="banerprods">
    <h2><a href="#"> Drinks </a> /<a href="#"> Food </a>/<a href="#"> Misc</a></h2>
    <div id="prodsmiddle">
    <table width="880" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><li class="ul-buttom ul-buttom-hide"><a href="#fragment-1">1</a></li></td>
    <td><li class="ul-buttom ul-buttom-hide"><a href="#fragment-2">2</a></li></td>
    <td><li class="ul-buttom ul-buttom-hide"><a href="#fragment-3">3</a></li></td>
    <td><li class="ul-buttom ul-buttom-hide"><a href="#fragment-4">4</a></li></td>
    </tr>
    </table>
    </ul>       
    </div>
    </html>

i already try this:

<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function(){
            $(".ui-tabs-panel").hide;
            $(".ul-buttom ul-buttom-hide").click(function () {
            var divname= this.value;
              $("#"+divname).show("slow").siblings().hide("slow");
        });

        });
    </script> "

but didnt work! PLEASE HELP!!!

Upvotes: 1

Views: 3170

Answers (4)

Didier Ghys
Didier Ghys

Reputation: 30666

First .hide should be .hide():

$(".ui-tabs-panel").hide();

Then for the links, if you want to target element with two classes, you have to write it this way, without the space:

 $(".ul-buttom.ul-buttom-hide")

Although I think you'd better target the anchor tag with only one class will be sufficient:

$(".ul-buttom-hide a").click(function () {
    var divname= $(this).attr('href');
    $(divname).show("slow").siblings().hide("slow");
});​

Upvotes: 0

Jasper
Jasper

Reputation: 76003

You had a few mistakes in your logic:

$(function(){
    $(".ui-tabs-panel").hide();//notice the parenthesis added to `hide()`

    //the elements you want to select are the children `a` elements of the `li` elements with both the `.ul-buttom` and the `.ul-buttom-hide` classes
    $(".ul-buttom.ul-buttom-hide").children().click(function () {

        //since we are getting data from the `href` attribute, we target it with `.attr('href')`,
        //`.value` is for form inputs
        var divname = $(this).attr('href');

        //since the `href` attribues already have hash marks, we don't have to add any
        $(divname).show("slow").siblings().hide("slow");
    });
});​

Demo: http://jsfiddle.net/jasper/XSLEw/

Upvotes: 2

TimCodes.NET
TimCodes.NET

Reputation: 4689

Try this?

$(document).ready(function(){
            $(".ui-tabs-panel").hide();
            $(".ul-buttom.ul-buttom-hide a").click(function () {
              var divname= $(this).attr("href");
              $(divname).show("slow").siblings().hide("slow");
            });
});

Upvotes: 0

Tx3
Tx3

Reputation: 6916

.hide should probably be .hide()

Upvotes: 0

Related Questions