Question

好的，我已经在这里找到了不少问题，我已经从那些人那里拿走了我能做的但是它似乎仍然无法正常工作。（我是JavaScript / jQuery的新手。）

这是jsFiddle：https://jsfiddle.net/5ffhoqpt/1/

var showPhotography = function () {
    $(".design").hide();
    $(".film").hide();
    $(".web").hide();
}

var showDesign = function () {
    $(".photography").hide();
    $(".film").hide();
    $(".web").hide();
}
var showWeb = function () {
    $(".design").hide();
    $(".film").hide();
    $(".photography").hide();
}

var showFilm = function () {
    $(".design").hide();
    $(".photography").hide();
    $(".web").hide();
}

我正在尝试让每个链接只显示具有相应类的div，而其他链接应该被隐藏。（我意识到现在我忘了向链接名称显示相应的类，但这不会解决我的问题）我点击链接，根本不会隐藏任何内容，控制台中没有错误，所以我真的不知道知道从哪里开始排除故障。

解决方案不能包含#tags，因为我需要在多个不同的部分和容器上重用该类。我的网站上还有其他工作的javascript，所以链接jquery不是问题。它必须是我的代码中的其他内容，阻止下面的所有工作解决方案在我的网站上工作。

Answer 1

您可以这样做：

Full demo

<a href="" data-action="showPhotography">Photography</a>

var showPhotography = function () {
        $(".design").hide();
        $(".film").hide();
        $(".web").hide();
    }

var showDesign = function () {
    $(".photography").hide();
    $(".film").hide();
    $(".web").hide();
}
var showWeb = function () {
    $(".design").hide();
    $(".film").hide();
    $(".photography").hide();
}

var showFilm = function () {
    $(".design").hide();
    $(".photography").hide();
    $(".web").hide();
}

var actions = {
    showPhotography: showPhotography,
  showDesign: showDesign,
  showWeb: showWeb,
  showFilm : showFilm
}

$("[data-action]").on('click', function(e) {
  e.preventDefault();
  var action = $(this).data('action');
  actions[action]()
});

Answer 2

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

<nav>
    <ul>
        <li>
            <a href="" onclick="toggle_visibility('Photo');">Photo</a>
        </li>
        <li>
            <a href="" onclick="toggle_visibility('Design');">Design</a>
        </li>
        <li>
            <a href="" onclick="toggle_visibility('Web');">Web</a>
        </li>
        <li>
            <a href="" onclick="toggle_visibility('Film');">Film</a>
        </li>
    </ul>
</nav>

<div id="Film" style="display: none;">
    <p>
        Film Stuff
    </p>
</div>

<div id="Photo" style="display: none;">
    <p>
        Photography Stuff
    </p>
</div>

<div id="Web" style="display: none;">
    <p>
        Web Stuff
    </p>
</div>

Answer 3

我宁愿使用id并将click事件移动到jQuery

＆＃13;

$("#someId1").click(function () {
	$(".design").hide();
	$(".film").hide();
	$(".web").hide();
});

$("#someId2").click(function () {
	$(".photography").hide();
	$(".film").hide();
	$(".web").hide();
});
$("#someId3").click(function () {
	$(".design").hide();
	$(".film").hide();
	$(".photography").hide();
});

$("#someId4").click(function () {
	$(".design").hide();
	$(".photography").hide();
	$(".web").hide();
});

＆＃13;

<nav>
  <ul>
    <li>
      <a href="" id="someId1">Photography</a>
    </li>
    <li>
      <a href="" id="someId2">Design</a>
    </li>
    <li>
      <a href="" id="someId3">Web</a>
    </li>
    <li>
      <a href="" id="someId4">Film</a>
    </li>
  </ul>
</nav>

<div class="film">
  <p>
    Film Stuff
  </p>
</div>

<div class="photography">
  <p>
    Photography Stuff
  </p>
</div>

<div class="Web">
  <p>
    Web Stuff
  </p>
</div>

<div class="Design">
  <p>
    Design Stuff
  </p>
</div>

＆＃13;

Answer 4

如果锚文本与相应的div类相等（区分大小写），则可以使用以下简单解决方案：

// on document ready
$(function() {
  // for each anchor...listen click event
  $('a').on('click', function(e) {
      // prevent default action: link --> goto another page or...
      e.preventDefault();
      // hide all div
      $('div').hide();
      // show current div
      $('div.' + this.textContent).show();
  }).eq(0).trigger('click');
  // get the first div and simulate the click event in order to start with all hidden except the first div...
});

<!-- include jQuery library before using....  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
    <ul>
        <li>
            <a href="">Photography</a>
        </li>
        <li>
            <a href="">Design</a>
        </li>
        <li>
            <a href="">Web</a>
        </li>
        <li>
            <a href="">Film</a>
        </li>
    </ul>
</nav>

<div class="Film">
    <p>
        Film Stuff
    </p>
</div>

<div class="Photography">
    <p>
        Photography Stuff
    </p>
</div>

<div class="Web">
    <p>
        Web Stuff
    </p>
</div>

<div class="Design">
    <p>
        Design Stuff
    </p>
</div>

Answer 5

你可以尝试

<a href=javascript:function(args);>Link</a>

这种方法远非完美，但很适合快速修复。

如何调用html超链接中的函数

5 个答案: