Question

我现在尝试使这段代码正常工作我试图将前3行jquery更改为接下来的3行，而css和jquery包含在同一个php文件中< / p>

$('.nav li a').css("text-decoration", "none");
    $(this).css("text-decoration", "underline");
    return false;

$('.nav li a').addClass("undnone");
    $(this).addClass("und");
    return false;

CSS

.und
{
    text-decoration: underline;
}
.undnone{
    text-decoration: none;
}

这是整个jquery代码

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('.nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-4)){
        var toLoad = hash+'.php #content';
        $('#content').load(toLoad)
    }                                           
});

$('.nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();

    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }

    $('.nav li a').addClass("undnone");
    $(this).addClass("und");
    return false;


});

});

带有菜单的

html部分

<ul class="nav" >
    <li><a href="champions.php">Champions</a></li>
    <li><a href="items.php">Items</a></li>
    <li><a href="changes.php">Changes</a></li>
    </ul>
   <a href="#" class="scrollup">Scroll</a>

Answer 1

除了添加undnone课程外，您还必须删除und课程。

$(this).removeClass("undone").addClass("und");

否则，它们仍然被应用，und课程不会自动优先。

您使用旧/原始方式的原因是因为您实际上是为元素设置/覆盖text-decoration的值，而不是简单地添加类。

Answer 2

使用单个css-properties的类通常是个坏主意。你有点失去语义等等。您可以使用单个且更有意义的类active。

var active = 'active';
$('.nav li a' + '.' + active).removeClass(active);
$(this).addClass(active);

和CSS

.nav a {
    text-decoration: none;
}

.nav a.active {
    text-decoration: underline;
}

顺便说一句，你需要回调而不是结果。

function loadContent() {
    $('#content').load(toLoad, '', showNewContent); //no parenthesis here
}
function showNewContent() {
    $('#content').show('normal', hideLoader); //and here
}

无法正确添加addClass到代码

2 个答案: