单击时，jquery淡出切换另一个div的div？

时间：2015-07-30 13:20:51

标签： javascript jquery html css

This是我的测试页面，我想在页面加载时隐藏所有内容。当我点击＆＃34;关于＆＃34;文本使用fadeToggle（）淡入淡出;但是当我点击＆＃34;我的工作＆＃34;另一个文字淡入但在前一个文本之下。我希望将它淡出前一个。你可以帮帮我吗？

我的代码：

＆＃13;
＆＃13; 
<script>
$(document).ready(function(){
    $(".thumbnail").hide();
    $(".work").click(function(){
        $(".thumbnail").fadeToggle('slow');      
    });
});


$(document).ready(function(){
    $(".person").hide();
    $(".about").click(function(){
        $(".person").fadeToggle('slow');      
    });
});
</script>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：3)

试试这个。

$(document).ready(function(){
    $(".thumbnail").hide();
    $(".person").hide();

    $(".work").click(function(){
        $(".person").hide();
        $(".thumbnail").fadeToggle('slow');      
    });


    $(".about").click(function(){
        $(".thumbnail").hide();
        $(".person").fadeToggle('slow');      
    });
});

根据Matthew的评论更新 Demo here

答案 1 :(得分：2)

这是一个常见问题：

  

要显示的多个项目，但其中一个项目一次显示

简单的解决方案是：

  
      
  • 隐藏所有元素
    •   
  • 显示您想要查看的内容
    •   

通过这种方式，您可以覆盖所有可能的解决方案，甚至不显示任何内容，您可以跳过第二阶段

在你的情况下：

function hideAll(){
 $(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}

$(document).ready(function(){
    $(".work").click(function(){
        hideAll();
        $(".thumbnail").fadeToggle('slow');      
    });
    $(".about").click(function(){
        hideAll();
        $(".person").fadeToggle('slow');      
    });

hideAll();
});

答案 2 :(得分：0)

这是非常容易完成的事情，最好使用与要打开的div相同的点击事件名称，因此它可以是模块化的。

您的HTML有一些细微的修改以及JS中的重大更改，但它可以使用您喜欢的任意数量的部分，而无需不断添加新的click()函数。

$(document).ready(function() {
  $('section').hide();
  $(".btn").click(function() {
    $('section').fadeOut('1000');
    $('section#'+$(this).attr('id')).delay('1000').fadeIn();
  });
});
/* CSS Document 
html {
    background: url(green.jpg) no-repeat center center fixed;
    background-size: cover;
} 
 */

body {
  font-family: 'Candara', 'Open Sans', 'sans-serif';
}
/* css for the shiny buttons */

.btn {
  cursor: pointer;
  margin: 10px;
  text-decoration: none;
  padding: 10px;
  font-size: 14px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
}
.btn:hover {
  cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}
.contact {
  color: #000;
}
.contact:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.about {
  color: #000;
}
.about:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.work {
  color: #000;
}
.work:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
}
.buttons {
  padding-top: 30px;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 100px;
}
.title,
.subtitle {
  font-family: 'Wire one';
  font-weight: normal;
  font-size: 5em;
  margin-bottom: 15px;
  text-align: center;
}
.subtitle {
  line-height: .9em;
  font-size: 5.5em;
  margin-top: 0;
  margin-bottom: 40px;
}
.tagline {
  font-size: 1.4em;
  line-height: 1.3em;
  font-weight: normal;
  text-align: center;
}
.thumbnail {
  background-color: rgba(255, 255, 255, .2);
  border: 0 none;
  padding: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.thumbnail .caption {
  color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <a class="btn" id="about">About</a>
  <a class="btn" id="work">My Work</a>
  <a class="btn" id="contact">Contact</a>
</div>




<!-- Main (Home) section -->
<section class="section" id="about">
  <div class="container">
    <div class="person" style="display: block;">
      <div class="row">
        <div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center">

          <!-- Site Title, your name, HELLO msg, etc. -->
          <h1 class="title">Welcome!</h1>
          <h2 class="subtitle">My name is Daniel Adamek</h2>

          <!-- Short introductory (optional) -->
          <h3 class="tagline">
					I am 23 years old IT enthusiast located in Zlin, Czech Republic.<br>
					Currently, I am looking for any kind of job in IT field.<br>
          Please, check out my work and feel free to contact me :)
				</h3>

          <!-- Nice place to describe your site in a sentence or two -->

        </div>
      </div>
      <!-- /col -->
    </div>
    <!-- /row -->

  </div>
</section>


<!-- Third (Works) section -->
<section class="section" id="work">
  <div class="container">
    <div class="thumbnail" style="display: block;">
      <h2 class="text-center title">More Themes</h2>
      <p class="lead text-center">
        Huge thank you to all people who publish
        <br>their photos at <a href="http://unsplash.com">Unsplash</a>, thank you guys!
      </p>
    </div>
    <div class="row">
      <div class="col-sm-4 col-sm-offset-2">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-sm-offset-2">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>

如果您确实希望保持HTML完全相同，请尝试使用

$(document).ready(function(){
    $(".thumbnail").hide();
    $(".person").hide();
    $(".work").click(function(){
        $(".person").fadeOut('500');
        $(".thumbnail").delay('500').fadeIn('slow');      
    });
    $(".about").click(function(){
        $(".thumbnail").fadeOut('500');
        $(".person").delay('500').fadeIn('slow');      
    });
});

答案 3 :(得分：0)

function hideAll()
{
    $(".hideable").hide();
}

$(document).ready(function(){
    hideAll();  // great idea. First hide all then show the correct one.
    $(".button").click(function(){
        hideAll();
        if ($(this).hasClass("work"))
        {
          $(".thumbnail").fadeToggle('slow');
        }
        else if ($(this).hasClass("about"))
        {
           $(".person").fadeToggle('slow');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail hideable">thumbnail</div>
<div class="person hideable">person</div>

<button class="work button">Work</button>
<button class="about button">About</button>

这个例子应该给你一个开始。它使用.button类选择器将单击事件附加到按钮。然后它检查按钮是否有另一个类并执行适当的操作。

答案 4 :(得分：-1)

你的问题不依赖于jQuery - 它依赖于CSS并将这两个文本设置在彼此之上。然后你可以淡入/淡出。

我建议尝试将两个文本包装在一个div内并使用position属性。

即

HTML 

<div class="wrapper">
    <div class="thubmnail">Some Thumbnail</div>
    <div class="person">Some Person</div>
</div>

CSS 

.wrapper {
    position: relative;
}

.wrapper div {
    position: absolute; //This will position both divs one on top of the other
}
相关问题
最新问题