Question

我想在登陆时添加一个类（“ex”）或类似地通过jQuery添加。

来自按钮['#ity']我想切换第二类（“弧”）

来自按钮['＃action']我想切换第3课（“nex”）

所有都在（“ex”）的同一个div中，位于（“.her：first”）

（“ex”）里面有一个可点击的链接区域（“a.fr”）和一个单独的div（“mid”），关于这些领域的正确语法的任何想法都表示赞赏。

我添加了fadeToggle并在今天重新安排了我的语法无济于事我无法找到解决方案或设法让它正常工作。

这是我正在研究的jQuery ......非常草率，当然也不正确。由于我不完全知道如何修复它，我刚刚发布了。

$(".her:first").addClass("ex");

$('a[href="#act"]').click(function(){
    $(".her:first").fadeToggle("1200", function(){
        $(".her:first").toggleClass("arc nex");
    });
});

$('a[href="#act"]').click(function(){
    $(".her:first").toggleClass(function() {
        if ($(this).is($('a[href="#ity"]'))) {
            .toggleClass("arc");
        } else {
            .toggleClass("nex");
        }
    });
});

//我只是发布我的CSS以供参考//

.ex {   
    display: table-cell;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/el.png);
    background-position: left;
    background-repeat:no-repeat;
    margin-left:center;
    height:100%;
    width:100%;
}

.mid  {
    display: block;
    background-image: url('../img/pen.gif');
    background-repeat:no-repeat;
    background-position: left;
    height:100%;
    width:100%;
    position: relative;
    z-index:1;
}

a.fr {
    background-color:rgba(0,20,44, 0.1);
    background-position: left;
    position: absolute;
    display: block;
    margin-left:center;
    left: 592px;
    top: 54%;
    width: 136px;
    height: 136px;
    border-radius: 50%;
}

.her { }

.nex {
    display: table-cell;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/test2.png);
    background-position: left;
    background-repeat:no-repeat;
    margin-left:center;
    height:100%;
    width:100%;
    z-index:-1;
}

// --------我的HTML ---------- //

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>blah.com</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="style/styles.css" />

<link rel="shortcut icon" href="img/favo.png">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery
/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jq.js"></script>

<!-- Including the Questrial"  font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Questrial" />

<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>
<div class="bge">

<header>
<h1><a href="http://blah.com"</a>blah</h1>
<h2>Welcome</h2>
</header>

<div class="boo">
<nav>
<ul class="vNav">

<li id="lookbook"><a href="...." target="_self">LBOOK</a></li>
<li id="quality"><a href="#ity" target="_self">ITY</a></li>
<li id="boutique"><a href="...." target="_self">QUE</a></li>
<li id="contact"><a href="#act" target="_self">ACT</a></li>

</ul>
</nav>
</div>

<div class="her">
<div>
</div>
</div>

</div>

</body>
</html>

我非常感谢您的任何想法和时间。

Answer 1

我根据你说你想做的事做了一些清理，这是我到目前为止所做的，假设你的HTML已经到位：

[编辑：制作this jsFiddle以避免混乱]

如您所见，我删除了fadeToggle()。我不确定你想要用它做什么，但它做的是显示或隐藏（用动画）它被调用的元素。如果您对某些事情不确定，jQuery API总是一个很好的起点。我还通过为每个按钮创建一个独特的处理程序来简化您的点击处理程序。

您可以发布HTML，以便我可以看到元素的布局，并可能为您提供更多帮助吗？如果您有任何问题，请随时发表评论。

Answer 2

以下代码按预期为我执行了这些功能。

$(document).ready(function() {

var $her = $(".her:first");
var $ity = $('a[href="#ity"]');
var $act = $('a[href="#act"]');

$tree.toggleClass("ex");




$ity.click( function() {
$her.fadeOut(1000, function(){
$her.removeClass("nex").toggleClass("arc").fadeIn(1000);


});});

$act.click( function() {
$her.fadeOut(1000, function(){
$her.removeClass("arc").toggleClass("nex").fadeIn(1000);
});});

jQuery使用两个按钮在三个独立样式之间更改单个div的类

2 个答案: