Question

当我点击链接时，我在这里问我如何更改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> "

但没有工作！请帮助!!!

Answer 1

你的逻辑中有一些错误：

$(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/

Answer 2

.hide应该是.hide()

Answer 3

试试这个？

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

Answer 4

首先.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");
});

单击LI选项时，Jquery Div内容更改

4 个答案: