1

这是一个很大的问题。基本上，当您加载 index.html 时，我会创建一个具有中心标题的网站，但我想使用 jquery 来修改标题，以便在用户单击链接时将其移动到页面顶部，此外我还想要标题上升后要淡出的内容。因此，通过更改来更改面板display: hidden; 如果有人可以提供解决方案，将不胜感激[我对 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>

JS：

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

CSS：

@font-face {
    font-family: avant;
    src: url('font/avant.ttf');
}

html {
    background-color: black;
    color: white;
    font-family: avant;
}

.header {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -175px;
    margin-left: -450px;
    -webkit-transition: top 2s ease, 
                left 2s ease, 
                margin-left 2s ease, 
                margin-top 2s ease,
                position 2s ease;
}

.header-transition {
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    position: static;
    display: block;
}

li {
    text-decoration: none;
    display: inline;
    padding: .2% 1.3%;
}

li:hover {
    color: gray;
}

这就是我到目前为止所拥有的。尝试将正确的 id 传递给 jquery 以切换类时，我碰壁了。

多谢你们 ：）

4

3 回答 3

0

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

  • 您绑定了两次单击事件 - 通过内联 HTML onclick 处理程序和脚本中的 jQuery click() 方法。

  • 您在 onclick 事件中绑定的函数名称与您在脚本中定义的函数名称不同，因此当事件触发时不会调用任何内容。

  • 您在闭包中定义了一个命名函数，例如 $(function pageChanger(id)... 这对我来说看起来不对，但我可能错了。

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

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

你可以做的是在你的脚本中坚持使用 click() 方法，但是你可以简单地将它直接绑定到你的列表元素，而不是在函数中使用它。注意：最好将锚元素放在列表元素中并将点击事件附加到这些元素上，因为这在语义上是更好的标记，并且应该避免在旧版浏览器中触发失败的事件（我认为 IE7 不会监听点击事件'不绑定到锚元素）。

尝试以下操作：

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.

我希望你发现一些/任何有用的。

于 2013-10-25T21:30:42.733 回答
0

以下代码将在每次单击列表项时切换标题 css。

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

演示

于 2013-10-25T21:32:15.063 回答
0

$("id") 表示其标签名称为id的所有元素

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

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

如果我了解您的情况，您应该这样做：

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

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

编辑：

如果每个 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
        }
    });
于 2013-10-25T20:35:24.470 回答