Javascript 使用带有面板更改的css移动jquery div_Javascript_Jquery_Html_Css

Javascript 使用带有面板更改的css移动jquery div

javascript jquery html css

Javascript 使用带有面板更改的css移动jquery div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是一个很大的问题。基本上，当你加载index.html时，我正在创建一个有中心标题的站点，但我想使用jquery修改标题，在用户单击链接时将其移动到页面顶部，此外，我还想在标题上升后内容淡出。因此，通过改变显示来改变面板：隐藏；如果有人能提供一个解决方案，我们将不胜感激[我对js相当陌生，以前没有做过jquery，但似乎jquery是最好的库] <!DOCTYPE html> <html> <head> <title>Chris

这是一个很大的问题。基本上，当你加载index.html时，我正在创建一个有中心标题的站点，但我想使用jquery修改标题，在用户单击链接时将其移动到页面顶部，此外，我还想在标题上升后内容淡出。因此，通过改变显示来改变面板：隐藏；如果有人能提供一个解决方案，我们将不胜感激[我对js相当陌生，以前没有做过jquery，但似乎jquery是最好的库]

    <!DOCTYPE html>
<html>
<head>
    <title>Chris Calcroft &#149; Arbitrator</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/stuff.js"></script>
</head>
<body>
    <div class='header'>
        <img src='img/header.jpg' alt='header'>
        <ul class='headerNav'>
            <li id='about' onclick='pageChange(id);'>about</li>
            <li id='projects' onclick='pageChange(id);'>projects</li>
            <li id='contact' onclick='pageChange(id);'>contact</li>
        </ul>
    <div>
</body>
</html>

CSS:

这就是我目前所拥有的。我在尝试将正确的id传递给jquery以使其切换类时遇到了麻烦

谢谢大家：

$id表示所有元素的标记名都是id

您必须在下面的函数中使用id，但我认为这不是您想要的

$(function pageChanger(id) {  
    $("#"+id).click(function() {  
        $(".header").toggleClass(".header-transition");  
    });  
});

如果我了解你的情况，你应该：

$('.headerNav li').click(function(){
$(".header").toggleClass(".header-transition");  
});

有关选择器的更多信息，请访问

编辑：

如果每个li将执行不同的操作，则您应该给他们ID并执行以下操作：

$('#about').click( function(){
......
});
$('#project').click( function(){
......
});
$('#contact').click( function(){
......
});

为所有其他人做这件事。或：

 $('.headerNav li').click(function(){
    switch($(this).attr('id')){
        case 'about':
               //do something
        case 'project':
               //do something else
        case 'contact':
               //do another thing
        }
    });

乍一看，有几件事是错误的：

您将绑定两次单击事件—通过内联HTML onclick处理程序和脚本中的jQuery click方法

在onclick事件中绑定的函数与在脚本中定义的函数具有不同的名称，因此在触发事件时不会调用任何函数

您正在闭包中定义命名函数，例如$function pageChangerid。。。我觉得这不太对，但我可能错了

每次单击事件时，将id传递给函数的方式都是错误的。在onclick语句中，您将“id”传递给函数，我假设您的意思是元素的id属性的值，但这不起作用。另一方面，在脚本中，您将函数的参数定义为“id”，但在函数内部将其引用为引号中的字符串，即id。因此，您的jQuery选择器对象$id.click在此表单中告诉jQuery选择一个“id”元素，这是无效的。HTML中没有“id”元素

这里可能有点离题，但我希望以上内容可以帮助您提高对JS/jQuery的一般知识

您可以在脚本中坚持使用click方法，但不必在函数中使用它，只需将它直接绑定到列表元素即可。注意：最好将锚元素放在列表元素中，并将click事件附加到这些元素上，因为这在语义上是更好的标记，并且应该避免在旧式浏览器中触发失败的事件我认为IE7不会侦听未绑定到锚元素的click事件

请尝试以下操作：

Change links to -
<li><a href="#">Link text</a></li>

Change JS to this -
$(function(){
  $(".headerNav a").click(function(e){
     var elem = $(e.target), // e.target points to the element that triggered the event
         elemId = elem.attr("id");

     // it isn't clear what each unique element's click event will do, but here is where you defien that logic      
  })
})

Using e.target in a jQuery object is a much cleaner and more efficient way to dynamically bind an event to multiple elements.

我希望您能发现其中一些有用的信息。

下面的代码将在单击每个列表项时切换标题css

$(document).ready(function(){
    var currentCssClass = $(".header").attr("class");
    $(".header > ul > li").click(function(){
        $(".header").toggleClass("header-transition");
    });
});

在JSFIDLE中，没有黑色背景，我看不到任何东西！！！！您是否只想在每个li单击事件上切换css类？yeh还具有隐藏的文本部分，这些文本部分在单击相关按钮时显示。请回答谢谢，当我执行$'.headerNav li'。单击函数{switch$this.attr'id'{case'about'：$.header.toggleClass.header-transition；case'project'：$.header.toggleClass.header-transition；case'contact'：$.header.toggleClass.header-transition；}}；它不会改变它不会改变，因为toggleClass只接受类名的值，不包括句点字符。所以删除句点字符。这样就可以了。嗨，这很好：谢谢你能成为一个明星，在我的css中看到我需要做的更改，使它只需在页面上滑动到顶部，就像它现在跳过来一样在左上角？谢谢：你想向上滑动哪个元素？你当然可以使用jQuery进行转换。我已经让它以正确的方式移动，并根据单击的链接显示文本，但是如果你在“关于”上，例如单击“项目”，文本不会更改，你必须关闭可见性，因为关于使用按钮，请不要然后打开项目面板。此外，每次单击它时，它总是上下移动，我希望它在单击后保持在顶部。以下是jquery:$document.readyfunction{$.header>ul>li.clickfunction{$.header.toggleClassheader-transition；}；$document.readyfunction{$'.headerNav>li.clickfunction{switch$this.attr'id'{case'aboutNav'：$.content-hidden-about.toggleClasscontent；case'projectsNav'：$.content-hidden-project.toggleClasscontent；case'contactNav'：$.content-hidden-contact.toggleClasscontent；}；}；对不起，这些词真的很混乱。我看不到任何按钮。我也不知道你想移动哪个元素，或者你想让哪个元素固定在某个位置。

Change links to -
<li><a href="#">Link text</a></li>

Change JS to this -
$(function(){
  $(".headerNav a").click(function(e){
     var elem = $(e.target), // e.target points to the element that triggered the event
         elemId = elem.attr("id");

     // it isn't clear what each unique element's click event will do, but here is where you defien that logic      
  })
})

Using e.target in a jQuery object is a much cleaner and more efficient way to dynamically bind an event to multiple elements.

$(document).ready(function(){
    var currentCssClass = $(".header").attr("class");
    $(".header > ul > li").click(function(){
        $(".header").toggleClass("header-transition");
    });
});