gpt4 book ai didi

javascript - 添加混合 javascript 函数以使内容淡入列内的另一个内容/使它适用于两个单独的列

转载 作者:行者123 更新时间:2023-11-28 18:03:24 26 4
gpt4 key购买 nike

javascript 混合函数 -----> 通过按方形按钮(1 或 2),列内的一个内容(文本、图像)淡入第二个内容 还可以选择再次返回到第一个内容。

可以在此处找到具有两个内容的一列淡入淡出效果动画功能的完整代码:

JSFiddle

现在将其添加到 4 列中:result ----> 所有 4 列都变形了,都在垂直的一行上并且函数扭曲了列的大小。

用 4 列编写代码,一旦函数被添加到它的 div 中,就会成为一场灾难。 注意:我为 4 列使用了 toogle css/html 结构,因为它是最好的布局。如果您想知道的话。

JSFiddle

  • 如何在第 1 列和第 4 列正确添加此函数(总计 具有这种效果的 2 列)

    • 在这个函数中使用两列,是否需要一个多功能脚本what needs to be added make both work?(恐怕对 javascript 了解不多)

**列的原始结构应该是每行 2 列。

JSFiddle

*不能把所有的代码都放在这里,因为这里没有足够的空间来张贴,只是提一下,知道大多数时候必须添加。*

最佳答案

编辑:试试这个 The JQuery Fixed JSFiddle and new HTML
修复了 HTML 故障 Fixed HTML AND CSS最新的 HTML 看起来像这样

<div class="wrapper">
<div id="outer" class="cf">
<!-- first -->
<div class="holder f_left">
<div class="column">
<div class="column_title">
2014
</div>
<h4>GOLD</h4>
<hr>
<div class="entry-content" id="box1_c1">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj
rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>

</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box1_c1 -->

<div class="entry-content" id="box1_c2" style="display: none">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi
rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>

</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box1_c2 -->
</div>
<!-- end of column -->
</div>
<!-- end of holder -->

<!-- second -->
<div class="holder f_left">
<div class="column">
<div class="column_title">
2014
</div>
<h4>PEARL</h4>
<hr>
<div class="entry-content" id="box2_c1">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj
rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>

</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box2_c1 -->

<div class="entry-content" id="box2_c2" style="display: none">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi
rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>

</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box2_c2 -->
</div>
<!-- end of column -->
</div>
<!-- end of holder -->

<!-- third -->
<div class="holder f_left">
<div class="column">
<div class="column_title">
2013
</div>
<h4>ROSE</h4>
<hr>
<div class="entry-content" id="box3_c1">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj
rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>

</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box3_c1 -->

<div class="entry-content" id="box3_c2" style="display: none">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi
rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>

</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box3_c2 -->
</div>
<!-- end of column -->
</div>
<!-- end of holder -->

<!-- fourth -->
<div class="holder f_left">
<div class="column">
<div class="column_title">
Sep 2013
</div>
<h4>LIME</h4>
<hr>
<div class="entry-content" id="box4_c1">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj
rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>

</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box4_c1 -->

<div class="entry-content" id="box4_c2" style="display: none">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi
rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>

</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box4_c2 -->
</div>
<!-- end of column -->
</div>
<!-- end of holder -->

</div>
<!-- end of outer -->
</div>
<!-- end of wrapper -->

JQuery 看起来像这样:

$(document).on("click", ".square", function () {
var id = $(this).attr("contentId");
var box_name_full = $(this).closest('div.entry-content').attr('id');
var box_split = $(this).closest('div.entry-content').attr('id').split("_");
var box_name = box_split[0];
var box_c = box_split[1];

//alert("box_name_full = " + box_name_full);
//alert("box_name = " + box_name);
//alert("box_c = " + box_c);

if ($("#" + box_name + "_" + id).is(":visible"))
$("#" + box_name + "_" + id).fadeOut("slow").hide();


if (id == "c1") {
//Make the first square box red color
$("div[id^='" + box_name + "'] div.square[contentId='c1']").css('background', 'red');
//Make the second square box gray color
$("div[id^='" + box_name + "'] div.square[contentId='c2']").css('background', '#CCC');

if ($("#" + box_name + "_" + "c2").is(":visible")) {
$("#" + box_name + "_" + "c2").fadeOut("slow").hide();
}
$("#" + box_name + "_" + id).fadeIn('slow').show();
} else if (id == "c2") {
//Make the second square box red color
$("div[id^='" + box_name + "'] div.square[contentId='c2']").css('background', 'red');
//Make the first square box gray color
$("div[id^='" + box_name + "'] div.square[contentId='c1']").css('background', '#CCC');

if ($("#" + box_name + "_" + "c1").is(":visible")) {
$("#" + box_name + "_" + "c1").fadeOut("slow").hide();
}
$("#" + box_name + "_" + id).fadeIn("slow").show();
}
});

我从 JSFiddle 中清理了 HTML

任何时候你的 HTML 变得奇怪就把它放到这个网站上 http://jsbeautifier.org/你会看到任何错误,比如 extra </div>等等...

在前 2 个文章框之后清理包装结束之前,现在它一直在所有 4 个文章框的底部结束。仍然可能出现 javascript 错误,但这是一个开始。

这是新的 JSFiddle,只有新的 HTML New JSFiddle

当您同时单击这两个红色方 block 时,您会注意到的第一个问题是,我猜第二个红色方 block 几乎是正确的。但是第一个默认的红色方 block 是错误的。这是因为您将看到的第一个红色方 block 的 HTML 是错误的

第一条入口内容有

<div class="entry-content" id="c1">

里面有一个

<div id="details">
<div style="display">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">

4 个不同 <div>

现在第二个有

<div class="entry-content" style="display: none" id="c2">

只有

<div class="shadow">

所以也许第一个只需要一个<div class="shadow">没有别的吗?我现在可以告诉你第一个不需要 <div style="display">这条线什么都不做。

下面是您的整个 HTML,我已经删除了 <div style="display></div>仅来自第一个

<body>
<!-- onload="clickMenu('outer','div','more')" -->
<div class="wrapper">
<div id="outer" class="cf">
<div class="column f_left">
<!-- first -->
<div class="holder">
<div class="column_box">
<div class="column_title">
2014
</div>
<h4>GOLD</h4>
<hr>
<div class="entry-content" id="c1">
<div id="details">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash
hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
</div>
</div>
</div>
<!-- end of entry-content c1 -->
<div class="entry-content" style="display: none" id="c2">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu
tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>

<div class="square" contentId="c1"></div>
<div class="square" contentId="c2"></div>

</div>
<!-- end of shadow -->
</div>
<!-- end of entry-content c2 -->
</div>
<!-- end of post (column_box) -->
</div>
<!-- end of holder -->
</div>
<!-- end of column f_left -->
</div>
<!-- end of outer cf -->

<!-- second -->
<div class="holder">
<div class="column_box">
<div class="column_title">
2014
</div>
<h4>PEARL</h4>
<hr>
<div class="entry-content">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_left f_left">
<p>rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashrjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashrjrw jrwjrwhwrj jarjearjar jrajrajraj ytre
ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi
rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash</p>
<!-- this is disabled.
<div class="more">
<i class="show">more &#187;</i>
<i class="hide">&#171; less</i>
<br />
<img src="more/rabbit.jpg" alt="rabbit" title="">
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all</p>
</div> <!~~ close more ~~>
-->
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content -->
</div>
<!-- end of column_box -->
</div>
<!-- end of holder -->

<div class="column f_left">
<!-- third -->
<div class="holder">
<div class="column_box">
<div class="column_title">
2013
</div>
<h4>DIAMOND</h4>
<hr>
<div class="entry-content">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw
jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj</p>
<!-- disabled content
<div class="more">
<i class="show">more &#187;</i>
<i class="hide">&#171; less</i>
<br />
<img src="more/rabbit.jpg" alt="rabbit" title="">
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all</p>
</div> <!~~ close more ~~>
-->
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content -->
</div>
<!-- end of column_box -->
</div>
<!-- end of holder -->

<!-- fourth -->
<div class="holder">
<div class="column_box">
<div class="column_title">
Sep 2013
</div>
<h4>ROSE</h4>
<hr>
<div class="entry-content">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_left f_left">
<p>rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashrjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashrjrw jrwjrwhwrj jarjearjar jrajrajraj
ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu
tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash</p>
<!--
<div class="more">
<i class="show">more &#187;</i>
<i class="hide">&#171; less</i>
<br />
<img src="more/rabbit.jpg" alt="rabbit" title="">
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all</p>
</div> <!~~ close more ~~>
-->
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content -->
</div>
<!-- end of column_box -->
</div>
<!-- end of holder -->
</div>
<!-- end of column f_left -->
</div>
<!-- end of wrapper -->

关于javascript - 添加混合 javascript 函数以使内容淡入列内的另一个内容/使它适用于两个单独的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20013143/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com