Javascript 使用jquery和c显示/隐藏div#_Javascript_Jquery

Javascript 使用jquery和c显示/隐藏div#

javascript jquery

Javascript 使用jquery和c显示/隐藏div#,javascript,jquery,Javascript,Jquery,我正在尝试使用jquery显示/隐藏三个div JQuery 在html的头部分 <script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script> <script type="text/javascript"> $("a.menu").click(function () { $("div.featuredposts_content").hide();

我正在尝试使用

jquery显示/隐藏三个div

JQuery 在html的头部分

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $("a.menu").click(function () {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
</script>


$（“a.menu”）。单击（函数（）{
$（“div.featuredposts_content”）.hide（）；
$（$（this.attr（'href'））.show（）；
返回false；
});

看起来更新面板把事情搞砸了

您需要在每次回发后绑定事件，否则会将其设置回默认页面

$(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostBack);
    PostBack();
});

function PostBack(){
       $("a.menu").off().on.('click' , function () {
            $("div.featuredposts_content").hide();
            $($(this).attr('href')).show();
            return false;
        });
}

在元素出现在页面上之前分配事件处理程序。将标题部分中的脚本更改为

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function() {
        $("a.menu").click(function () {
            $("div.featuredposts_content").hide();
            $($(this).attr('href')).show();
            return false;
        });
    });
</script>


$（函数（）{
$（“a.menu”）。单击（函数（）{
$（“div.featuredposts_content”）.hide（）；
$（$（this.attr（'href'））.show（）；
返回false；
});
});

$（function（）{}）

代码使脚本在文档准备就绪或所有元素都已创建时运行。

我认为问题在于没有对事件使用doc ready处理程序或load函数：

<script type="text/javascript">
   $(document).ready(function(){ // <-------------------------you are missing this
    $("a.menu").click(function () {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
   }); //<----------------------------------------------------
</script>


$（document）.ready（function（）{/尝试以下操作
<html>
   <script>
      $(document).ready(function(){
         $("a.menu").click(function () {
            $("div.featuredposts_content").hide();
            $("#" + $(this).attr("value")).show();
         });
      })
   </script>
   <body>
      <ul id="featuredposts" class="featuredposts">
         <li><a href="#" class="menu" value="IdOfDiv1">something a</a></li>
         <li><a href="#" class="menu" value="IdOfDiv2">something b</a></li>
      </ul>

      <div id="IdOfDiv1" class="featuredposts_content">
         Cat1
      </div>  

      <div id="IdOfDiv2" class="featuredposts_content">
         Cat2
      </div>
  </body>
</html>


$（文档）.ready（函数（）{
$（“a.menu”）。单击（函数（）{
$（“div.featuredposts_content”）.hide（）；
$（“#”+$（this.attr（“value”））.show（）；
});
})




第一类
第二类


编辑：
这里有一个快速的解释
$（document）.ready（）
将确保在页面完全加载之前不会进行点击连接。当页面首次加载时，所有内容都会显示出来
一旦用户单击带有菜单类的链接之一，该功能将运行。它将隐藏每个div
，其中包含featureedposts\u内容类的div
。然后，根据单击的链接，它获取值
，并在设置中使用该值来显示div
。中的值
链接是要显示的div
的id
。
你所说的“代码不工作”是什么意思，请尝试解释你所面临的问题。为什么$（$（this.attr（'href'））.show（）；？-看起来对我有用。@lante-它是从href告诉我要显示哪个div id…基本上它是说$（'#cat1'）.show（）；但OP提到它与“rel”一起工作，所以它应该具有相同的效果，即没有附加事件。你能解释这个答案吗？
<html>
   <script>
      $(document).ready(function(){
         $("a.menu").click(function () {
            $("div.featuredposts_content").hide();
            $("#" + $(this).attr("value")).show();
         });
      })
   </script>
   <body>
      <ul id="featuredposts" class="featuredposts">
         <li><a href="#" class="menu" value="IdOfDiv1">something a</a></li>
         <li><a href="#" class="menu" value="IdOfDiv2">something b</a></li>
      </ul>

      <div id="IdOfDiv1" class="featuredposts_content">
         Cat1
      </div>  

      <div id="IdOfDiv2" class="featuredposts_content">
         Cat2
      </div>
  </body>
</html>