Изменение содержимого Jquery Div при нажатии опции LI - PullRequest
Новая
       1

Изменение содержимого Jquery Div при нажатии опции LI

1 голос
/ 27 февраля 2012

Что случилось, ребята? Я здесь, чтобы спросить, как я могу изменить содержимое div, когда нажимаю на ссылку вот код: 

    <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>

я уже пробовал это: 

<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> "

но не сработало! ПОЖАЛУЙСТА, ПОМОГИТЕ !!!

Ответы [ 4 ]

2 голосов
/ 27 февраля 2012

В вашей логике было несколько ошибок: 

$(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");
    });
});​

Демонстрация: http://jsfiddle.net/jasper/XSLEw/

0 голосов
/ 27 февраля 2012

Первый .hide должен быть .hide(): 

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

Тогда для ссылок, если вы хотите настроить таргетинг на элемент с двумя классами, вы должны написать его так, без пробела: 

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

Хотя я думаю, что лучше использовать метку привязки только с одним классом: 

$(".ul-buttom-hide a").click(function () {
    var divname= $(this).attr('href');
    $(divname).show("slow").siblings().hide("slow");
});​
0 голосов
/ 27 февраля 2012

Попробуйте это? 

$(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");
            });
});
0 голосов
/ 27 февраля 2012

.hide должно быть .hide()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...