小编Iho*_*huk的帖子

如何在命令行中打开和编辑文件？我试着使用命令open:

sudo open -e /etc/apache2/extra/httpd-vhosts.conf

但文件是Locked,我不能改变任何东西.

我需要编辑很多文本并使用nano或vim不是很方便.

我有一个div里面移动另一个div..block当我悬停在上面时,我需要停在当前位置.container.怎么做？

HTML:

<div class="container">
    <div class="block"></div>
</div>

CSS:

.container {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    position: relative;
}

.block {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    animation: move 2s linear infinite;
}

@keyframes move {
    0% { left: 10px; }
    25% { left: 50px; }
    50% { left: 100px; }
    75% { left: 50px; }
    100% { left: 10px; }
}

DEMO

我有简单的切换div.我需要在content悬停时将大屏幕段打开,并在点击时在小屏幕上打开.我尝试这样做:

HTML:

<div class="container">
    <div class="headline">Headline exaple</div>
    <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quia nulla, rem harum, minima sint assumenda perferendis cupiditate rerum corporis obcaecati, quam natus repudiandae veniam dolor. Maiores commodi sequi, esse.
    </p>
</div>

CSS:

.container {
    width: 400px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.headline {
    background: #ccc;
    padding: 5px;
    cursor: pointer;
}

.headline:hover + .content {
    display: block;
}

.content {
    padding: 5px;
    display: none;
}

jQuery的:

var …

我需要根据浏览器的语言将用户重定向到另一个页面.例如:如果浏览器的语言english重定向到site.com/en/.

我尝试这样做:

$(document).ready(function () {
    var userLang = navigator.language || navigator.userLanguage;

    switch (userLang) {
        case 'en':
            window.location.href = window.location.origin + '/en';
            break;
        case 'de':
            window.location.href = window.location.origin + '/de';
            break;
        default:
            break;
    }
});

这是有效的,但页面不断重新加载.如何解决或提示另一种解决方案？

我决定在Owl Carousel 2上做一个滑块.一切正常,我喜欢它,但我注意到了一个bug.当我更改浏览器窗口(仅限Chrome)的大小时,滑块项目会重新排列,并且背面有一个幻像项目.

HTML:

<div class="owl-carousel">
    <img src="http://placehold.it/320x240?text=Slide%200">
    <img src="http://placehold.it/320x240?text=Slide%201">
    <img src="http://placehold.it/320x240?text=Slide%202">
    <img src="http://placehold.it/320x240?text=Slide%203">
</div>

脚本:

$(".owl-carousel").owlCarousel({
    loop: true,
    margin: 20,
    items: 3,
    nav: true,
});

截图:

我该如何解决？

[ Codepen ]

我有这样的路线:

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];

并且AuthGuard:

export class AuthGuard implements CanActivate, CanActivateChild {
  constructor(private router: Router,
              private authService: AuthService) { }

  canActivate() {
    if (this.authService.isLoggedIn()) {
      return true;
    }
    this.router.navigate(['login']);
    return false;
  }
}

当用户访问该网站时,他被重定向到登录页面.当用户尝试访问/dashboard未经身份验证的路由时也会发生相同 /dashboard如果用户已登录,如何将用户重定向到？例如,当我访问myapp.com并且我已登录时,我希望被重定向到myapp.com/dashboard.

我有一个这样的结构形式:

<form role="search" method="get" id="searchform" action="">
    <input type="text" name="s" id="s" placeholder="Search..." />
    <input type="submit" id="searchsubmit" />
</form>

我需要在您单击输入字段时更改后台提交按钮.怎么做？

我的网站上有联系表格。我需要在发送邮件之前更改一个字段的值。例如name。我像这样尝试：

function contactform7_before_send_mail( $cf7 ) {
    $cf7->posted_data['your_name'] = 'John Doe';
}

add_action( 'wpcf7_before_send_mail', 'contactform7_before_send_mail' );

但是在电子邮件中出现了表单中指定的值。

我有一个简单的联系表，最后添加了一个自定义字段：

<input type="text" name="test" id="test" class="form-control">

我需要检查字段为空，然后提交表格：

$('.wpcf7-submit').on('click', function (e) {
    e.preventDefault();

    var testInput = $('input[name="test"]').val();

    if (testInput != '') {
        // How to submit form here?
    }
});

怎么做？

我在页面上有两个相同的滑块,但它们可能更多.我需要Next为每个滑块制作一个自定义按钮.我试着这样做:

HTML

<div class="slider-wrap">
    <div class="slider">
        <div class="slider-item">Slide 1</div>
        <div class="slider-item">Slide 2</div>
        <div class="slider-item">Slide 3</div>
    </div>
    <button id="next">Next ></button>
</div>

<div class="slider-wrap">
    <div class="slider">
        <div class="slider-item">Slide 1</div>
        <div class="slider-item">Slide 2</div>
        <div class="slider-item">Slide 3</div>
    </div>
    <button id="next">Next ></button>
</div>

jQuery的

$('.slider').slick({
    dots: true,
    nextArrow: $('#next')
});

演示:http://codepen.io/fabric/pen/bwprxJ

更新: 第二个演示:http://codepen.io/fabric/pen/KgzZVz

如果我单击第一张幻灯片的下一个按钮,则更改第二张幻灯片.如果第二个,那么没有任何作用.怎么解决？

我有两个内部容器块,下面有按钮.我需要,当我点击按钮时,第一个div慢慢向上移动并移除.我试过了:

HTML:

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
</div>
<button class="move">Click</button>

CSS:

.container {
    border: 2px solid blue;
    display: inline-block
}

.block {
    width: 100px;
    height: 100px;
    background: red;
    margin: 5px;
}

.move {
    display: block
}

jQuery的:

$(document).ready(function() {
    $('.move').click(function() {
        $('.block:first-child').animate({scrollTop: '-100px'}, 1000, function() {
            $(this).remove();
        });
    });
});

但是当我点击按钮时,先.block删除.我需要先把它搬起来.怎么解决？

的jsfiddle

我认为这是很多类似的问题，但我还没有找到好的解决方案。我有一个容器，其中包含 3 列，宽度为 33%。我想像截图一样在它们之间添加边距。

我尝试这样做：

HTML：

<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
</div>

CSS：

.container {
    width: 500px;
    border: 3px solid red;
    overflow: hidden;
    padding: 20px 0;
}

.column {
    width: 33.33%;
    float: left;
    height: 200px;
    background: #ccc;
    text-align: center;
    margin-left: 20px;
}

.column:first-child {
    margin: 0;
}

但最后一列移动到新行。如何在不改变宽度的情况下在块之间添加空格？

JSFiddle